一、Webkit内核CSS hack(Chrome、Safari、Opera)

注:很奇怪,在Windows10中的Edge(版本是13)下,竟然也起作用,莫非微软要向Webkit看齐?


@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { /* 这里写只在Webkit内核的浏览器下起作用的样式 */ } }

二、Firefox CSS hack

```css
@-moz-document url-prefix(){

    .demo { 
       /*  
        这里写写只在firefox中起作用的样式
       */
    } 

}
```


三、IE8/9/10/11 CSS hack

```css
@media screen\0 {
.demo{
/*
这里写在IE 8 9 10 11下起作用的样式
*/
}
}


*** ### 四、IE6/7/8 CSS hack ```css @media \0screen\,screen\9 { .demo{ /* 这里写在IE 6 7 8 下起作用的样式 */ } }

五、IE9/10 CSS hack

注:IE9/10能识别CSS属性值后面的\9\0,所以想要在IE9/10下表现出来的样式,可以在后面加\9\0即可
此hack有一个问题,即设置的所有属性在IE7下都不起作用,可以使用 IE6/7 的hack来修复一下

```css
display: none\9\0;



*** ### 六、IE6/7 CSS hack > 注:IE6/7能识别CSS属性前面的 * ,所以想要在IE6/7下表现出来的样式,可以在前面面加 * 即可 ```css *display:none;

七、IE8 CSS hack

@media \0screen\,screen\9 {
    .demo{
         /* 
          这里写在IE8 下起作用的样式
        */
    }
   }

八、IE7 CSS hack

注:IE7的单独的CSS hack 必须结合着IE6的hack使用

*color:red;
_color:green; 

九、IE6 CSS hack


_color:green;

十、IE9 CSS hack

经过不懈的寻找,我终于找到了IE9 only的hack,这也是一个组合hack,需要用到IE10+的hack(见十一)和IE9/10的hack :100:


/* IE9 css hack */ .demo{ color:green; color:red\9\0; *color:green; } @media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { .demo { color: green; } }

十一、IE10+ CSS hack


/* IE10+ css hack */ .demo{ color:green; } @media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { .demo { color: red; } }

十一、各种CSS hack的测试例子


<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>测试CSS HACK</title> <style type="text/css"> /* webkit css hack */ .webkit-hack{ color:green; } @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } /* firefox css hack */ .firefox-hack{ color:green; } @-moz-document url-prefix(){ .firefox-hack{ color:red; } } /* IE8/9/10/11 css hack */ .IE-hack{ color:green; } @media screen\0 { .IE-hack{ color:red; } } /* IE6/7/8 css hack */ .IE678-hack{ color:green; } @media \0screen\,screen\9 { .IE678-hack{ color:red; } } /* IE9/10 css hack 他有一个问题: 无法在IE7及以下起作用即在IE7及以下2个color都不起作用,文本显示为黑色 所以可以用IE6/7的hack修复一下 */ .IE910-hack{ color:green; color:red\9\0; *color:green; } /* IE67 css hack */ .IE67-hack{ color:green; *color:red; } /* IE8 hack */ .IE8-hack{ color:green; } @media \0screen\,screen\9 { .IE8-hack{ color:red; *color:green; } } /* IE7 css hack 听说在傲游浏览器下也起作用? 那位同学试一下,并且把起作用的傲游浏览器版本区间告诉我 */ .IE7-hack{ color:green; *color:red; _color:green; } /* IE6 css hack */ .IE6-hack{ color:green; _color:red; } /* IE10+ css hack */ .IE10AndUp-hack{ color:green; } @media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { .IE10AndUp-hack { color: red; } } /* IE9 css hack */ .IE9-hack{ color:green; color:red\9\0; *color:green; } @media screen and (-ms-high-contrast:active),(-ms-high-contrast: none) { .IE9-hack { color: green; } } </style> </head> <body> <p class="webkit-hack">我在webkit内核浏览器下显示为红色,在其他非webkit内核浏览器下显示为绿色</p> <p class="firefox-hack">我在firefox浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE-hack">我在IE8/9/10/11浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE10AndUp-hack">我在IE10/11浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE678-hack">我在IE6/7/8浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE910-hack">我在IE9/10浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE67-hack">我在IE6/7浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE8-hack">我在IE8浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE9-hack">我在IE9浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE7-hack">我在IE7浏览器下显示为红色,在其他浏览器下显示为绿色</p> <p class="IE6-hack">我在IE6浏览器下显示为红色,在其他浏览器下显示为绿色</p> </body> </html>