详谈CSS的hack写法

【概论】

简单理解，CSS hack的就是使CSS代码兼容不同的浏览器

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;

【浏览器】

注意：我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（Mozilla Firefox）即可，至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT\傲游浏览器。

【列表】

（一）3种表现形式

（二）书写顺序

（三）浏览器识别字符标准对应表

（四）各种CSS hack情况介绍

【概论】

（一）3种表现形式

CSS Hack大致有3种表现形式：CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack

①内部Hack：CSS Hack主要针对类内部Hack，比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识等等；

②选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

③HTML头部引用(if IE)Hack：针对所有IE：<![endif]-->，针对IE6及以下版本：<![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

（二）书写顺序

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。稍后依次介绍。

（三）浏览器识别字符标准对应表

主要几种情况：

①大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。

②\9 ：所有IE浏览器都支持

③_和- ：仅IE6支持

④* ：IE6、E7支持

⑤\0 ：IE8、IE9支持，opera部分支持

⑥\9\0 ：IE8部分支持、IE9支持

⑦\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,IE8,FF

【区别符号】：“\9”、“*”、“_”

#tip{ 
background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/ 
background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/ 
*background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/ 
_background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/ 
}

【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、GoogleChrome、Safari等)

3. 区别IE6、IE7、Firefox(方法1)

【区别符号】：“*”、“_”

#tip{  
background:blue;/*Firefox背景变蓝色*/  
*background:black;/*IE7背景变黑色*/  
_background:orange;/*IE6背景变橘色*/  
}

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4. 区别IE6、IE7、Firefox(方法2)

【区别符号】：“*”、“!important”

#tip{  
background:blue;/*Firefox背景变蓝色*/  
*background:green!important;/*IE7背景变绿色*/  
*background:orange;/*IE6背景变橘色*/  
}

【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5. 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,所以不使用

猜你喜欢