CSS hack处理

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

各浏览器CSS解析:

1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。
2.9    :所有IE浏览器都支持
3._和-  :仅IE6支持
4.*     :IE6、E7支持
5.    :IE8、IE9支持,opera部分支持
6.9  :IE8部分支持、IE9支持
7.9  :IE8、IE9支持

1.区别IE和非IE浏览器

#tip{ 
background:blue;/*非IE背景蓝色  因为所有浏览器都能解释*/ 
background:red9;/*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:#6669;      //IE8
* color:#999;        //IE7
_color:#EBEBEB;      //IE6
}
:root element{color:#6669;}//IE9

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

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

.element{
color:#000;             /*w3c标准*/
[;color:#f00;];         /*Webkit(chrome和safari)*/
color:#6669;           /*IE8*/
*color:#999;            /*IE7*/
_color:#333;            /*IE6*/
}

:root .element{color:#0f09;}  /*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):测试各个版本浏览器的布局效果

原文地址:https://www.cnblogs.com/mo-cha/p/6042842.html