以前，浏览器主要有IE和NetScape两家；到此刻，各类百般成果强大的浏览器层出不穷。譬喻：环球闻名的浏览器有Chrome、FireFox、Safari、Opera，常见的"国产"浏览器有遨游、QQ、360、搜狗、UC、世界之窗。

由于差异浏览器所遵循的尺度也有所差异，再加上不行制止的措施bug、经济好处等因素的滋扰。同样的网页代码(HTML + CSS)，在差异浏览器上的显示结果却略有差异，甚至大有差异。纵然是同一个浏览器，其差异版本的显示结果也有所差异，尤其是IE。这就给网页前端设计人员带来了很大的困扰。开拓人员必需分身思量到所有主流的浏览器，才气在差异的浏览器上显示出沟通或满意需要的结果。于是CSS Hack技能就降生了。

CSS Hack技能，就是操作差异浏览器差异版本之间的CSS实现的特性差别，来满意我们需要的结果：在所有主流浏览器上显示统一的结果，可能为特定浏览器显示特定的结果。

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

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

虽然，这里有个前提，那就是浏览器首先得可以或许识别并支持该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的子弟选择器。

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

IE 8的CSS Hack

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

.css-hack {
    color: red; /* 其他浏览器显示赤色 */
}

@media \0screen {
    .css-hack { color: blue; } /* 只有IE 8显示蓝色 */
}

IE 9的CSS Hack

有两种：
.css-hack {
background-color:red\0; /* ie 8/9都能辨识*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/
}

.css-hack {color:orange;}
.css-hack {*color: white; /* IE6+7, doesn’t work in IE8/9 as IE7 */}
.css-hack {_color: red; /* IE6 */}
.css-hack {color: green\0/IE8+9; /* IE8+9 */}
:root .css-hack { color:pink \0/IE9; } /* IE9 */

IE 10的CSS Hack

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：该脚本里面的IE排除条件注释，以确保IE6-9不承认它，然后它功能检测到了名为@ cc_on。 

<!--[if !IE]><!--><script> 
if (/*@cc_on!@*/false) { 
document.documentElement.className+=' ie10'; 
} 
</script><!--<![endif]-->

请注意/*@cc_on ! @*/中间的这个感叹号。 
这样就可以在ie10中给html元素添加一个class=”ie10″，然后针对ie10我们可以自定义容器样式：
.ie10 .css-hack { 
color:pink; /* IE10-only styles go here */ 
}

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内核浏览器显示蓝色 */
    }
}