About the compatibility of Hack in CSS under different browsers

这篇文章主要介绍了各种浏览器下的CSS Hack兼容性写法,CSS Hack大致可以分为内部Hack和选择器Hack以及HTML头部引用Hack,需要的朋友可以参考下

由于不同浏览器所遵循的标准也有所不同，再加上不可避免的程序bug、经济利益等因素的干扰。同样的网页代码(HTML + CSS)，在不同浏览器上的显示效果却略有不同，甚至大有不同。即使是同一个浏览器，其不同版本的显示效果也有所不同，尤其是IE。这就给网页前端设计人员带来了很大的困扰。开发人员必须兼顾考虑到所有主流的浏览器，才能在不同的浏览器上显示出相同或满足需要的效果。于是CSS Hack技术就诞生了。

CSS Hack技术，就是利用不同浏览器不同版本之间的CSS实现的特性差异，来满足我们需要的效果：在所有主流浏览器上显示统一的效果，或者为特定浏览器显示特定的效果。

众所周知，如果在一个css样式选择器中存在两个名称相同的属性，浏览器一般会以最后面的属性为准。

<style type="text/css">   
.css-hack {   
    background-color: red;   
    background-color: blue; /* 最终背景色显示为蓝色 */
}   
</style>   
<p class="css-hack">CodePlayer</p>

当然，这里有个前提，那就是浏览器首先得能够识别并支持该css属性，对于浏览器不支持的css属性或值，浏览器将一律将其忽略。

这就是CSS Hack技术的实现原理。例如：即使我们在属性名称前面加上一个下划线_，IE 6 照样可以识别该属性，而且只有IE 6可以识别。因此，我们就可以利用这个特性，让IE 6实现某些特定的效果。

.css-hack {   
    background-color: red; /* 在其他浏览器上显示为红色 */
    _background-color: blue; /* 在IE 6上显示为蓝色 */
}

再者如，由于IE 6不支持max-width属性，但是IE6的css属性值支持expression表达式。因此，我们可以为IE 6 折中实现max-width的属性效果。

.css-hack {   
    background-color: red;   
    max-width: 200px;   
    _width: expression( function(me){ var maxWidth = 200; me.style.width = (me.offsetWidth <= maxWidth ? me.offsetWidth : maxWidth) + "px"; }(this) ); /* _开头只有IE6可以识别，出于性能考虑，此处的表达式只会执行一次 */
}

下面，我们就来探讨IE 6-11、FireFox、Chrome、Safari、Opera等浏览器的CSS Hack技术，以供特定浏览器进行特定属性的识别(国产浏览器一般都使用IE或Chromium内核，因此不予考虑)。

备注：以下内容多搜集于网络(在网络上搜集的时候发现，网上胡说八道的真多……)，并进行了亲自测试，以尽量确保准确无误，但由于各种系统平台、语言环境、大版本、小版本等问题，笔者并不能保证没有任何遗漏或错误。如果有读者发现，敬请留言告知。
IE浏览器的CSS Hack

所有的IE浏览器的CSS Hack

由于所有的IE浏览器都能够识别特定的css属性值后缀\9，因此我们可以给css的属性值添加\9后缀(在结尾的分号之前)，从而做到只有IE浏览器能够识别该属性，其他浏览器无法识别从而将其忽略掉。

.css-hack {   
    background-color: red; /* 其他浏览器上显示为红色 */
    background-color: blue \9; /* 所有IE浏览器上显示为蓝色 */
}

IE 6的CSS Hack

毫无疑问，如上所述，为css的属性前面加下划线_，这是给IE6专用的。

.css-hack {   
    background-color: red; /* 其他浏览器上显示为红色 */
    _background-color: blue; /* 只有IE 6浏览器上显示为蓝色 */
}

IE 7的CSS Hack

IE6、IE7都能够识别加了+、*或#前缀的css属性名称，但是IE 7不支持_前缀，而IE6支持。因此，我们可以先写一个*属性、+属性或#属性让IE6、IE7都能识别，再写一个_属性，只让IE6识别，将属性值复原回去，从而让前者只对IE 7生效。

.css-hack {   
    color: red; /* 其他浏览器上显示为红色 */
    +color: blue; /* 只有 IE 6、IE 7 浏览器上显示为蓝色 */
    _color: red; /* 让 IE 6 复原为之前设置的颜色 */
}

注意：有些网页上说，只用+、*或者#号的属性前缀就可以只让IE 7进行单独识别。不过经过本人亲测，不管是用IE Tester，还是专门下载一个XP系统，用原版IE 6测试，都表明：IE6、IE7都可以识别+、*或#号的属性前缀。
另外，还有人说，IE 7支持!important，IE 6不支持!important，因此可以通过*属性: 值!important;的形式来实现IE 7的CSS Hack。

实际上，这样也是不行的，因为IE 6不是不支持!important，只是有个bug而已，详情请参见IE6究竟支不支持!important和IE6 IE7(Q) IE8(Q) 不完全支持!important规则。

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

.css-hack {   
    color: red; /* 其他浏览器上显示为红色 */
    *color: blue !important; /* 只有 IE 6、IE 7 浏览器上显示为蓝色 */
    _color: red; /* 让 IE 6 复原为之前设置的颜色 */
}

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

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
}   
*+html .css-hack {   
    color: blue; /* 只有IE 7显示蓝色  */
}

IE 7还支持在选择器前添加*:first-child+html，让当前选择器成为*:first-child+html的后辈选择器。

IE 8的CSS Hack

只有IE8支持嵌套如下@media类型查询语句：@media \0screen。

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
}   
@media \0screen {   
    .css-hack { color: blue; } /* 只有IE 8显示蓝色 */
}

IE 9的CSS Hack

没找到一个靠谱的。

IE 10的CSS Hack

没找到一个靠谱的。

IE 11的CSS Hack

没找到一个靠谱的。

IE 6 + IE 7 的CSS Hack

如上所述，只有IE 6、IE 7可以识别加了+或*号的属性前缀。

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
    *color: blue; /* IE 6、IE 7显示为蓝色 */
}

FireFox、Chrome、Safari、Opera的CSS Hack

FireFox的CSS Hack

FireFox支持嵌套其专用的css语句：@-moz-document url-prefix()。

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
}   
@-moz-document url-prefix() {   
    .css-hack {   
        color: blue; /* 只有FireFox显示为蓝色 */
    }   
}

Chrome、Safari等Webkit内核的浏览器的CSS Hack

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

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
}   
@media screen and (-webkit-min-device-pixel-ratio:0) {    
    .css-hack {   
        color: blue; /* Webkit内核浏览器显示蓝色 */
    }   
}

慎用\0的CSS Hack

网上许多与CSS Hack相关的文章中说，在css的属性值和分号之间添加字符\0，可以实现对IE 8或 IE 9的CSS hack(有的说，仅支持IE8)。

网上的示例是这样的：

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
    color: blue\0; /* IE8、IE9 显示蓝色 */
    +color: green; /* IE7 显示绿色 */
    _color: brown; /* IE6 显示棕色 */
}

通过实际测试发现，关于使用字符\0实现的上述CSS Hack有3点需要注意。

1、IE10也能够识别添加了字符\0的css属性值(笔者这里没有IE 11，不知道IE 11是否也能识别)。

2、属性值和\0之间不能有空格，有一个空格的话(例如：blue \0)，在IE 8中就失效了，仅对IE 9/IE 10有效。

3、如果我们只想对IE 8/IE 9进行CSS Hack呢？这个时候，我们去掉后面两行与IE6、IE7有关的代码。

.css-hack {   
    color: red; /* 其他浏览器显示红色 */
    color: blue\0; /* IE8、IE9 显示蓝色 */
}

这个时候，在IE 6、IE 7浏览器中，你会发现你看到的不是红色，而是黑色(也就是默认的字体颜色)！

这是因为一般浏览器的思路是，先过滤掉无效的css属性值，然后再从正确的属性设置中根据优先级获取最后面的css属性值。而IE 6/7浏览器不是先过滤掉无效的属性值，而是先根据优先级，获取最后面的css属性值，然后再来判断该属性值是否，无效就忽略掉。因此，如果按照网上所说，仅仅使用\0来实现IE 8+的CSS Hack，则会对IE6/7中的显示效果造成破坏。你必须通过额外的css属性设置来复原IE6/7的样式。

因为，我们不能够简单地下结论说，使用\0可以实现对IE 8、IE 9甚至IE 10 +的CSS Hack。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何利用CSS实现标题文字过长部分显示省略号

关于CSS3开启硬件加速的使用和陷阱

The above is the detailed content of About the compatibility of Hack in CSS under different browsers. For more information, please follow other related articles on the PHP Chinese website!