CSS hack处理

css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差。

各浏览器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支持

 

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”、“*”、“_”

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

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

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.区别IE7、Firefox

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

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

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

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

【区别符号】：“!important”

8.区别IE6、Firefox

【区别符号】：“_”

IE浏览器下hack总结

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*/

 

浏览器测试工具（常用IETEST）：测试各个版本浏览器的布局效果