说说css hack，说真的，我也是才去了解这个东西

之前在很多地方看到css hack，今天狠下心，看看到底是什么鬼，所有我去百度了，然后看了一篇文章，然后写个小总结。

css hack就是通过加一些特定的符号，不同的浏览器可以识别特定符号的样式，以此达到在不同的浏览器下面，可以看到不同的css样式。

1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2.\9    ：所有IE浏览器都支持
3._和- ：仅IE6支持
4.*     ：IE6、E7支持
5.\0    ：IE8、IE9支持，opera部分支持
6.\9\0 ：IE8部分支持、IE9支持
7.\0\9 ：IE8、IE9支持

各种CSS hack情况介绍

1.区别IE和非IE浏览器

#tip{

background:blue;/*非IE背景蓝色  因为所有浏览器都能解释*/

background:red\9;/*IE6、IE7、IE8、IE9背景紅色 因为\9在IE6.7.8.9中可以识别，覆盖上面样式 IE10跟11应该不识别，IE11测试确定*/

}

2.区别IE6、IE7(方法1)

#tip{

*background:black;/*IE7背景变黑色*/

_background:orange;/*IE6背景变橘色*/

}

3.区别IE6、IE7(方法2)

#tip{

background:black!important;/*IE7背景变黑色*/

background:orange;/*IE6背景变橘色*/

}

IE浏览器下hack总结

element{

color：#666\9； //IE8 IE9

*color：#999；   //IE7

_color:#EBEBEB； //IE6

}

可以看出，利用字符识别无法区分IE8和IE9，我们可以从伪类的识别来区分

element{

color：#666\9；      //IE8

*color：#999；        //IE7

_color:#EBEBEB；      //IE6

}

:root element{color：#666\9;}//IE9

【说明】：“:root”伪类IE系列只有IE9支持，其他主流浏览器均支持，利用这一点来区分IE8和IE9。另外考虑到opera部分支持，完全支持:root,所以不使用。

兼容各大主流浏览器(最新版本)css hack汇总如下（最全的）：

.element{

color:#000;             /*w3c标准*/

[;color:#f00;];         /*Webkit(chrome和safari)*/

color:#666\9;           /*IE8*/

*color:#999;            /*IE7*/

_color:#333;            /*IE6*/

}

:root .element{color:#0f0\9;}  /*IE9*/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (

-webkit-min-device-pixel-ratio:0) { .element{color:#336699;}}  /*opera*/

@-moz-document url-prefix(){ .element{color:#f1f1f1;}} /*Firefox*/

巴特西

说说css hack，说真的，我也是才去了解这个东西

最新文章

热门文章