什么是hack

CSS hack由于不同厂商的浏览器，比如 Internet Explorer、Safari、Mozilla Firefox、Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS hack 为不同版本的浏览器定制编写不同的 CSS 效果。

hack 的实现原理

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

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

如上所示，最终 div 的背景颜色会显示为蓝色，那么这就是 css hack 的实现原理。

所以即使我们在属性名称前面加一个下划线_，IE 6 照样可以识别，并且只有 IE 6 可以识别。因此，我们就可以利用这个特性，让 IE 6 实现某些特定的效果：

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

由此我们可以发现，实现 hack 其实是非常简单的事情，就是比较麻烦而已，那么下面我将总结一下兼容 IE 6-11、FireFox、Chrome、Safari、Opera 等各种浏览器的 hack 写法。

各浏览器 hack 写法

众IE毒瘤 :

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

IE 6-7 :

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

IE 8 :

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

IE 9 :

.css-hack {
    color: red;    /* 其他浏览器显示红色 */
    color:blue\0;    /* ie 8-9*/
    color:blue\9\0;    /* ie 9*/
}

IE 10+ :

.css-hack {
    color: red;    /* 其他浏览器显示红色 */
}
 
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
    .css-hack {
        color:blue;    /* IE10 - 11显示蓝色 */
    }
}

Firefox :

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

Chrome、Safari等Webkit内核浏览器 :

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