[ 本文转载自:Bible's Blog ]
首先声明在我这篇文章发表时,IE7.0及以上目前有四个版本,分别是Ie7.0beta1,Ie7.0beta2,Ie7.0beta3,Ie7.0 RC。这四个版本本身也存在对CSS兼容的不同。特别是beta1,beta2与RC版本的有很大差异。
通过我自己对IE7.0RC做的测试。发现IE7RC已经解决了许多在IE6存在的bug,比如使用左漂浮并且使用了margin-left,此margin的数值加倍bug。还解决了IE6.0不认!important优先权的问题,此外还有比如两DIV之间margin,padding都已经被置0。
但是如果相邻的那个DIV使用的文本对象,文本对象会自动产生3px空隙,类似这种很多细节bug都在IE7RC中有了好的解决。
下面要继续谈如何使你的页面通过IE7RC的测试。在谈这个话题前,请容我在这里发句牢骚:还有什么比在多个不同浏览器上测试CSS更痛苦的事情? 那就是在多个不同浏览器的多个不同版本上测试CSS!
因为有最新消息放出IE7在这个月应该还会放出一个RC(Release Candidate)版本,(具体情况请参考:IE7 TEAM BLOG:http://blogs.msdn.com/ie/),在我们不知道最新的之前,暂且以下都以IE 7.0.5700.6 Release Candidate(点击下载)为准。
注意!此IE7.0安装后重新启动后可能导致你无法进入WINDOWS,如果你使用了已破解的WINDOWS或正版WINDOWS(即你当前所在系统可在线更新WINDOWS系统的)就可以放心安装。
安装后,它会直接覆盖IE6.0。也就是说你就暂时不能用IE6.0浏览器了。如果你是测试或开发人员,要同时在IE6和IE7下测试你的页面,可以下载IE各版本的独立版本的IE浏览器(包括ie3_9x.zip,ie4_9x.zip,ie501sp2_nt.zip,ie55sp2_9x.zip,ie6eolas_nt.zip)
以上谈到了关于IE7.0的安装与解决本机同时运行IE6和IE7的解决方法。下面我们谈关于IE7.0RC的CSS兼容解决方法:
兼容在这里主要以兼容IE6.0及以上版本,兼容Firefox1.5以上,这都是主流,至于其他浏览器有兴趣的朋友我们可以在网下或QQ上交流。
要做到兼容,主要有3种解决方案:1.条件注释。2.JS。3。CSS hack。第1种需要在HTML里才有效,还要对特定浏览器准备特定CSS,所以不好管理。第2种同样需要准备两套以上CSS。第3种虽然W3C不推荐不支持,但是现在被大多数开发者所用。
现在IE6和IE7以及FF对盒模型解释大致是一致的,都是盒实际宽度=盒内容宽度+内补丁值+边框宽度。主要差异还是在一些细节上。比如IE6.0的margin双倍问题,这样的话在写CSS或搭建XHTML结构时候尽量去写兼容性地,可扩展性的代码和结构定义,避免BUG的出现,避免BUG条件的产生,预防隐患存在的不兼容性。
最后,谈到很重要的一点,CSS几乎无所不能,CSS hack更是无所不能。恰当综合使用CSS规则和CSS hack可以修正不同浏览器的显示细节的错位。例如我们对同样一个盒定义他的内容宽度:
.div{width:150px!important;>width:200px!important;width:600px;}
这样一句定义,这个盒的实际宽度在FF中是150px,而在IE7.0RC中是200px,在IE6.0中是600px.
为什么呢??
因为FF认识!important;并遵循其优先权,但是中间的值前面有个>,所以FF忽略它,这样最后FF中就是150px;
而IE7.0RC也认识“!important;”,同时也认识“>”,所以将后面一个“!important;”将前面一个覆盖掉,以最后一个为准。
而IE6.0不管“!important;”只认最后一个值。
知道了这,我想基本上这三个主要浏览器的兼容基本上没太大问题了。