浅谈各种浏览器下的CSS Hack兼容性写法( 二 ) _睿知

使用!important来实现IE 7的CSS Hack，必须是在同一个样式选择器中，而且同样需要在后面加_属性来复原IE 6的设置(这种方式还麻烦点，上面的方法还少写个!important) 。

文章插图
此外，IE 7也支持在选择器前添加* html，让当前选择器成为* html的后辈选择器，只有IE 7可以识别此类样式选择器(据说某些旧版本的Opera浏览器也能识别，不过这些版本早已作古了，无需考虑) 。

文章插图
IE 7还支持在选择器前添加*:first-child html，让当前选择器成为*:first-child html的后辈选择器。
IE 8的CSS Hack
只有IE8支持嵌套如下@media类型查询语句：@media screen 。

文章插图
IE 9的CSS Hack
没找到一个靠谱的。
IE 10的CSS Hack
没找到一个靠谱的。
IE 11的CSS Hack
没找到一个靠谱的。
IE 6IE 7 的CSS Hack
如上所述，只有IE 6、IE 7可以识别加了或*号的属性前缀。

文章插图
FireFox、Chrome、Safari、Opera的CSS Hack
FireFox的CSS Hack
FireFox支持嵌套其专用的css语句：@-moz-document url-prefix() 。

文章插图
Chrome、Safari等Webkit内核的浏览器的CSS Hack
Chrome、Safari等采用webkit内核的浏览器支持媒体类型查询语句：@media screen and (-webkit-min-device-pixel-ratio:0) 。

文章插图
慎用的CSS Hack
网上许多与CSS Hack相关的文章中说，在css的属性值和分号之间添加字符，可以实现对IE 8或 IE 9的CSS hack(有的说，仅支持IE8) 。
网上的示例是这样的：

文章插图
通过实际测试发现，关于使用字符实现的上述CSS Hack有3点需要注意。
1、IE10也能够识别添加了字符的css属性值(笔者这里没有IE 11，不知道IE 11是否也能识别) 。
2、属性值和之间不能有空格，有一个空格的话(例如：blue )，在IE 8中就失效了，仅对IE 9/IE 10有效。
3、如果我们只想对IE 8/IE 9进行CSS Hack呢？这个时候，我们去掉后面两行与IE6、IE7有关的代码。

文章插图
这个时候，在IE 6、IE 7浏览器中，你会发现你看到的不是红色，而是黑色(也就是默认的字体颜色)！
这是因为一般浏览器的思路是，先过滤掉无效的css属性值，然后再从正确的属性设置中根据优先级获取最后面的css属性值。而IE 6/7浏览器不是先过滤掉无效的属性值，而是先根据优先级，获取最后面的css属性值，然后再来判断该属性值是否，无效就忽略掉。因此，如果按照网上所说，仅仅使用来实现IE 8 的CSS Hack，则会对IE6/7中的显示效果造成破坏。你必须通过额外的css属性设置来复原IE6/7的样式。
【浅谈各种浏览器下的CSS Hack兼容性写法】因为，我们不能够简单地下结论说，使用可以实现对IE 8、IE 9甚至IE 10的CSS Hack 。