简略兼容浏览器（CSS hack）

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

查看更多 下一篇