深山老林

刚开始学XMLHTTP，试写的一个读取XML的JS脚本，没什么技术含量，主要用来读取一个类似于通讯录的XML文件。

------------------------------js-----------------------------------
<script type="text/javascript">
var xmlHttp;

//创建对象
function createXMLHttpRequest(){
 if (window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }else if (window.XMLHttpRequest){
  xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP.3.0");
 }
}

//发请请求
function doSearch(url){
 createXMLHttpRequest();
 xmlHttp.onreadystatechange = handleStateChange;
 xmlHttp.open("GET",url,"true");
 xmlHttp.send(null);
}

//处理响应
function handleStateChange(){
 if (xmlHttp.readyState == 4){
  if (xmlHttp.status == 200){
   parseResults();
  }
 }
}

//取得URL
function createURL(text){
 var url;
 url = "BranchAreaInfo.asp?AreaID=";
 if (text != ""){
  url += escape(text);
  doSearch(url);
 }
}

//读取XML文件
function parseResults(){

 var results = xmlHttp.responseXML;
 var sDiv = "";

 var shop = "null";
 var name ="";
 var address = "";
 var phone = "";
 var fax = "";

 var hhitshop = results.getElementsByTagName("shop");
 for (var i = 0; i< hhitshop.length; i++){
  shop =  hhitshop[i];
  name = shop.getElementsByTagName("name")[0].firstChild.nodeValue;
  phone = shop.getElementsByTagName("phone")[0].firstChild.nodeValue;
  fax = shop.getElementsByTagName("fax")[0].firstChild.nodeValue;
  address = shop.getElementsByTagName("address")[0].firstChild.nodeValue;

  sDiv += addDiv(name,photo,address,phone,fax);
 }
 document.getElementById("results").innerHTML = sDiv;
}

//输出格式化
function addDiv(name,photo,address,phone,fax){
 var WDiv = "<div class='shop_list'>";
 WDiv += "<a href='#'><img alt='"+ name +"' src='"+ photo +"' /></a>";
 WDiv += "<dl>";
 WDiv += "<dt><a href='#'>名称</a></dt>";
 WDiv += "<dd>电话："+ phone +"</dd>";
 WDiv += "<dd>传真："+ fax +"</dd>";
 WDiv += "<dd>地址："+ address +"</dd>";
 WDiv += "</dl>";
 WDiv += "</div>";
 
 return WDiv;
}
</script>
----------------------------------------------------------------

-----------------------------XML------------------------------
<?xml version="1.0" encoding="utf-8" ?>
<hhitshop>

 <shop>
  <name>aa</name>
  <phone>01234567</phone>
  <fax>01234567</fax>
  <address>aaaaa</address>
 </shop>

 <shop>
  <name>bb</name>
  <phone>12345678</phone>
  <fax>12345678</fax>
  <address>bbbbb</address>
 </shop>

 <shop>
  <name>cc</name>
  <phone>23456789</phone>
  <fax>23456789</fax>
  <address>ccccc</address>
 </shop>
</hhitshop>
-----------------------------------------------------------------

现在学习WEB标准的人越来越多，网上对于CSS，WEB标准的文章多如牛毛，不信？上百度或GOOGLE搜下。牛毛虽多，但长得也差不多，往往都是一篇文章的几个版本，这也算是方便了初学者吧，很多的文章都是E文的，感谢那些翻译的人，为WEB标准在中国的推广出了一份力，让我们这些E盲可以有机会学习到外国的技术。

如果你也学习WEB标准，不知你是否发现，那些“大虾”最常说的话是就是：

“这个不推荐使用。”，然后再加上句：“不推荐不表示不能用。”

这……不推荐跟不使用是两回事吧，能用就行啦，如果有更好的方法，那你说出来啊，没有就别开口，说这么一句，装“高手”啊。

我想大家都看过阿捷的《使用标准的好处》，里面提到

-----------------------------------------------------------
简单说，网站标准的目的就是：

• 提供最多利益给最多的网站用户
• 确保任何网站文挡都能够长期有效
• 简化代码、降低建设成本
• 让网站更容易使用，能适应更多不同用户和更多网路设备
• 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。

对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。
-----------------------------------------------------------

看起来是很吸引人的，不过这是在标准成功实现的情况下，用一句话说就是“目前正处于初级阶段”。目前为了让页面尽可能的接近标准，所能做的还是hack，“一般都推荐使用html代码上的hack而非CSS上的hack，因为CSS的bug总是会被修正的，只是时间问题了 sigh...”、“我说的html代码的hack意思是在html里面在基本不影响语义的情况下添加一些markup，来解决一些问题。比如box model的hack，可以嵌套两层div，通过css分别样式化两个div来实现效果，这样就不会向后不兼容了。:)”——这是一位高手对我文章的评论，的确是让我学到了不少，可是同时让我迷茫了，hack还有推荐的跟不推荐的？hack就是hack，hack不是标准，是“过渡”期对现在浏览器的一种非标准的标准化。只要浏览器不完全的、正确的支持标准，那标准化的路就没有尽头，hack就有其存在的必要性。

写到这我觉得自己有点偏激了，标准的目的是什么？让网页可以生存得更久、让更多的浏览器可以显示、让更多的人可以看到、向后兼容……你是否发现，这一切都是跟浏览器分不开的，可以说标准其实是依赖于浏览器的发展，如果新版的浏览器不正确的理解标准，为了让页面显示“正常”，就会出现新的hack，那之前的hack还是对以前版本的浏览器有效，就算在新版本的浏览器中将被修正。除非不再使用旧版的浏览器，可是有多少人会一直让自己所使用的浏览器版本保持在最新呢？

一时思想混乱，就写到此吧……

这两天又给BLOG换了个衣裳，主要是想改变下那灰色的调调，也许现在看上去感觉更爽一点。

这次修改主要遇到的问题是背景的问题，因为页面是动态的，高度不确定，所以没办法定高度，这在FF的问题就是：当里面的对象浮动时，背景不能填满。看了《CSS布局自适应高度解决方法》一文后，使用了文章里提到的方法，效果不错。

在这里补充一下文章中的方法对IE5/IE5.5的兼容方案：

-----------------------------------------------
#wrap{
height:100%;/*将高设为100％，可同时兼容IE/WIN的几个版本*/
overflow: hidden;/*IE5*/
}
#wrap/*IE5.5+*/{
overflow:hidden !important;/*IE6、FF*/
overflow /*IE5.5*/:visible;/*当高设为100％时，在IE5.5中须把overflow属性设为visible*/
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------

原理就不多说了，这个方法很实用，推荐。

IE vs FF

CSS 兼容要点：

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

转自netvtm.com

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
先看代码：

-----------------------------------------------
#wrap{
overflow: hidden;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------

实现原理：

块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom（足够大的值）到列的块元素 。
应用margin-bottom（足够大的值）到列的块元素。
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器

IE Mac 5
得到高度正确，所以要过滤掉上面的代码。
/*\*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/
Opera
1. Opera7.0-7.2不能正确清除溢出部分，所以要加：
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/

转自设计中国