13.为什么IE6下容器的宽度和FF解释不同呢 ＜?xml version="1.0" encoding="gb2312"?> ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">＜meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> ＜style type="text/css"> ＜!-- div { cursor:pointer; ]
width:200px; height:200px; border:10px solid red [} --> ＜/style> ＜div ōnclick="alert(this.offsetWidth)">让FireFox与IE兼容＜/div> 　　问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices /asp.net/ 　　ASPNETusStan.mspx?mfr=true 　　IE6,IE7,FF 　　IE7.0出来了，对CSS的支持又有新问题。浏览器多了，网Bpx; /*For IE7 & IE6*/ 　　_height:20px; /*For IE6*/ 　　注意顺序。 　　这样也属于CSS HACK，不过没有上面这样简洁。 #example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */ 　　第二种，是使用IE专用的条件注释 ＜!--其他浏览器 --> ＜link rel="stylesheet" type="text/css" href="css.css" />
＜!--[if IE 7]>
＜!-- 适合于IE7 --> ＜link rel="stylesheet" type="text/css" href="ie7.css" /> ＜![endif]--> ＜!--[if lte IE 6]> ＜!-- 适合于IE6及一下 --> ＜link rel="stylesheet" type="text/css" href="ie.css" /> ＜![endif]--> 　　第三种，css filter的办法，以下为经典从国外网站翻译过来的。. 　　新建一个css样式如下：
#item {
width: 200px; height: 200px; 9_OPv=p]
background: red;
}
　　新建一个div,并使用前面定义的css的样式： 　　＜div id="item">some text here＜/div>
　　在body表现这里加入lang属性,中文为zh： 　　＜body lang="en"> 　　现在对div元素再定义一个样式： *:lang(en) #item{ background:green !important; } 　　这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：  #item:empty { background: green !important
}:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。 　　对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种，简洁，兼容性比较好。