关于css hack在浏览器兼容性问题上的使用

最新推荐文章于 2021-05-21 18:34:19 发布

原创最新推荐文章于 2021-05-21 18:34:19 发布 · 376 阅读

CC 4.0 BY-SA版权

文章标签：

29 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了一种称为 CSS Hack 的方法，通过特定语法让不同版本的 Internet Explorer 浏览器和其他浏览器能够应用不同的样式规则，从而解决浏览器间 CSS 解析差异导致的显示问题。

考虑到目前有很多浏览器，尤其是其中还有IE6、IE7这样的老版本的浏览器，不同浏览器对css的解析情况不一样。为了能兼容不同的浏览器，我们使用css hack来实现在不同浏览器中得到想要的页面效果。

本文只罗列出常用的方法，具体的使用，可以参考css hack在百度百科中的使用说明。

（1）下划线"_"和中间线"-"：用来选择IE6及以下。但是为了避免与一些带有中间线的属性混淆，我们通常使用下划线"_"；

（2）星号"*"、加号"+"、井号"#"：选择IE7及以下。通常使用"*"；

（3）\9：选择IE6及以上；

（4）\0：选择IE8+和Opera；

（5）\9\0：用于IE9；

（6）!important：除了IE6，其他都能识别

由于这些符号在使用的过程中存在交叉的现象，因此平时的时候一定要注意书写顺序，对于交叉部分，后面会覆盖前面。举例如下：

.test{
  color: red;//所有浏览器都能识别
  _color: blue;//只有IE6能识别
  *color: green;//IE6-7都能识别
}

由于IE6、7都能识别“*”，_color会被下面的覆盖，因此在IE6和IE7中字体的颜色为green，其他浏览器中都是red

假如是下面的情况：

.test{
  color: red;
  *color: green;
  _color: blue;
}

则IE6中字体为蓝色，IE7中字体为绿色，其余浏览器中字体为红色。

因此，平时的书写顺序应该是firefox的写在前面，IE7的写在中间，IE6的写在最后面