史上最全的CSS hack方式一览，前端篇

（本例IE10效果同IE9,Opera最新版效果同IE8）

background-color:orange; /* all - for Firefox/Chrome */

background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */

background-color:blue\9\0; /* ie 9/10 - for ie9/10 */

*background-color:black; /* ie 6/7 - for ie7 */

_background-color:green; /* ie 6 - for ie6 */

}

/*demo3

实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序

IE6显示为：红色，

IE7显示为：蓝色，

IE8显示为：绿色，

IE9显示为：粉色，

Firefox/Chrome显示为：橘色，

（本例IE10效果同IE9，Opera最新版效果也同IE9为粉色）

.element {

background-color:orange; /* all IE/FF/CH/OP*/

}

.element {

*background-color: blue; /* IE6+7, doesn’t work in IE8/9 as IE7 */

}

.element {

_background-color: red; /* IE6 */

}

.element {

background-color: green\0; /* IE8+9+10 */

}

:root .element { background-color:pink\0; } /* IE9+10 */

/*demo4*/

该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序

IE6显示为：橘色，

IE7显示为：粉色，

IE8显示为：黄色，

IE9显示为：紫色，

IE10显示为：绿色，

Firefox显示为：蓝色，

Opera显示为：黑色，

Safari/Chrome显示为：灰色，

.hacktest{

background-color:blue; /* 都识别，此处针对firefox */

background-color:red\9; /*all ie*/

background-color:yellow\0; /*for IE8/IE9/10 最新版opera也认识*/

+background-color:pink; /*for ie6/7*/

_background-color:orange; /*for ie6*/

}

@media screen and (min-width:0){

.hacktest {background-color:black\0;} /*opera*/

}

@media screen and (min-width:0) {

.hacktest { background-color:purple\9; }/* for IE9/IE10 PS:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */

}

@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/

/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */

:root .hacktest { background-color:#963\9; }

demo1是测试不同IE浏览器下hack 的显示效果

IE6显示为：粉色，

IE7显示为：粉色，

IE8显示为：蓝色，

IE9显示为：蓝色，

Firefox/Chrome/Opera显示为：蓝色，

若去掉其中的!important属性定义，则IE6/7仍然是粉色，IE8是紫色，IE9/10为橙色，Firefox/Chrome变为红色，Opera是紫色。是不是有些奇怪：除了IE6以外，其他所有的表现都符合我们的期待。那为何IE6表现的颜色不是_background-color:green;的绿色而是*+background-color:pink的粉色呢？其实是最后一句所谓的IE7私有hack惹的祸？不是说*+是IE7的专有hack吗？？？错，你可能太粗心了！我们常说的IE7专有*+hack的格式是*+html selector，而不是上面的直接在属性上加*+前缀。如果是为IE7定制特殊样式，应该这样使用：

*+html #ie7test { /* IE7 only*/

color:green;

}

经过测试，我发现属性前缀*+background-color:pink;只有IE6和IE7认识。而*+html selector只有IE7认识。所以我们在使用时候一定要特别注意。

demo2实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序

IE6显示为：绿色，

IE7显示为：黑色，

IE8显示为：红色，

IE9显示为：蓝色，

Firefox/Chrome显示为：橘色，

（本例IE10效果同IE9,Opera最新版效果同IE8）

demo3实例也是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序