网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

由于万恶的IE6和IE7，我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题，好在大部分问题已经有了足够的总结和途径。废话不多说，下面是一些方法区分浏览器的方法和我的看法。

主要途径

CSS Hack 直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为

#content{ background:red; /* 所有浏览器 */ background:orange\9; /* 所有IE浏览器 */ *background:yellow; /* IE7和IE6 */ +background:green; /* IE7 */ _background:blue; /* IE6 */ }

还有一些hack不太实用，就不一一列举了。 CSS Hack的缺点是CSS文件无法通过W3C验证，代码阅读时会很奇怪。 条件注释CSS文件 条件注释是写在html里的只会被IE识别的代码，一般在区域通过不同的条件注释导入不同的CSS，不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”：

由于IE8下CSS问题较少，一般只需要为IE6、7写一点修正代码。如果需要，可以在ie.css里用CSS Hack对IE6/7进行差异处理。

条件注释CSS文件的缺点是会增加至少1次http请求，影响渲染速度，而且维护时不够方便。 条件注释 条件注释跟上面的方法原理一样，只不过这里是给注释不同的class。

这样在CSS中使用下面的代码即可区分版本

#content{background:red;} .ie9 #content{background:orange;} .ie8 #content{background:yellow;} .ie7 #content{background:green;} .ie6 #content{background:blue;}

你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求，而且不需要任何hack。

最佳方法

毫无疑问，最好的办法就是用条件注释为CSS提供区分。所有CSS文件可以合并在一起，ie的fix代码与正常规则临近，便于维护，而且没有hack可以让代码符合标准（使用zoom、私有CSS3属性依旧无法通过验证T_T）。 标准浏览器：本文指IE9、Chrome、Safari、Firefox及Opera等支持CSS标准属性的浏览器。 via：lightcss

标签:IE8IE7IE6网页标准浏览器相关