日期:2014-05-17  浏览次数:20788 次

简单兼容浏览器(CSS hack)
把目前浏览器归纳一下,FireFox 、Opera、Safari、Chrome、IE8归一类,IE7 和 IE6 分别归一类。虽然IE8还有许多地方不标准,好在绝大多数常用的算是统一了,所以放到第一类。很明显,按着第一类的标准写web,就基本在各类浏览器里通行了,但用的人最多的是IE7和6,考虑到第一类会成为未来,所以兼容的“原则”应该是:正常写法让给第一类,特殊写法针对ie7和6进行。

去网上搜索了一些资料,总结方法如下:
【方法一】 利用通配符:* +
<style>
body {
/* ie8、ff3、op9、ch2 */
background:green;
}
*+html body {
/* ie7 */
background:blue;
}
*html body {
/* ie6 */
background:red;
}
</style>

【方法二】 利用优先级:!important
<style>
body {
/* ie8、ff3、op9、ch2 */
background:green !important;  
/* ie7 */
>background:blue !important;  
/* ie6 */
background:red;  
}
</style>

【方法三】 利用IE特性:. _
<style>
body {
/* ie8、ff3、op9、ch2 */
background:green;  
/* ie7 */
.background:blue;  
/* ie6 */
_background:red;  
}
</style>

web前端寒风总结推荐:
方法1:无疑写起来是最麻烦的一种,要在选择标签外来区分,可以选择性使用。
方法2:!important是三个方法里唯一标准CSS写法,但很明显,不符合我开头归纳的“原则”,即把正常写法让给了ie6,而把特殊写法用在了支持最多的 ie8、ff……等上,无疑写起来麻烦,所以不推荐方法2,!important应该用在某些多选的样式定义场合,而不应该用于进行兼容浏览器。
方法3:抱歉,标题里写的是“利用IE特性”,其实我也不太清楚“_”和“.”是CSS语法还是真的ie特有?希望高人指教,不管怎么说,方法3即符合“原则”,又写起来简单,所以推荐使用方法3。