不同浏览器对css的解析是不同是,因此需要css hack来解决浏览器局部的兼容性问题。针对不同浏览器写不同的CSS代码的过程叫CSS Hack。
常见的hack有三种形式,分别是CSS属性hack,CSS选择符hack,IE条件注释hack,hack主要针对IE浏览器。
CSS属性hack:如IE6能识别"_"和"*",IE7能识别"*",不能识别"_",firefox两个都不能识别。
color:red;//所有浏览器识别
_color:red;//IE6识别
*color:red;//IE6、IE7识别
+color:red;//IE6、IE7识别
*+color:red;//IE6、IE7识别
[color:red;//IE6、IE7识别
color:red\9;//IE6、IE7、IE8、IE9识别
color:red\0;//IE8、IE9识别
color:red\9\0;//IE9识别
color:red \0;//IE9识别
color:red!important;IE6不识别!important
CSS选择符hack:IE6能识别*html.class{},IE7能识别*+html.class{}或者*:first-child+html.class{}。
*html #demo{color:red;} //IE6识别
*+html #demo{color:red;} //IE7识别
body:nth-of-type(1) #demo{color:red} //IE9、FF3.5+、Chrome、Safari、Opera识别
head:first-child+body #demo{color:red} //IE7+、FF、Chrome、Sarari、Opera识别
:root #demo{color:red\9} //仅IE9识别
IE条件注释hack:IE条件注释从IE5开始提供的一种非标准逻辑语句只在IE有有效,其他浏览器被当做注释。
<!--[if IE]>IE可见<![endif]-->
<!--[if IE 6]>IE6可见<![endif]-->
<!--[if IE 7]>IE7可见<![endif]-->
<!--[if !IE 7]>IE不可见<![endif]-->
<!--[if gt IE 6]>IE6以上版本可见<![endif]-->
<!--[if gte IE 6]>IE6和IE6以上版本可见<![endif]-->
<!--[if lt IE 7]>IE7以下版本可见<![endif]-->
<!--[if lte IE 7]>IE7和IE7以下版本可见<![endif]-->
<!--[if !IE]>IE不可见<![endif]-->
由于IE6不支持!improtant,ff支持!important,所以用来区分浏览器。
<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">abc</div>
在ie6中字体为绿色,在FF中字体为红色。
注意:在一个选择器里面,!important改变优先级,IE6下是无效的,后面的样式覆盖前面的样式。在有多个选择器的时候,!important有效的。
<style type="texe/css">
.demo{
color:red !important;
}
.demo{
color:green;
}
</style>
<div class="demo">abc</div>
在多选择符的时候也要注意IE6的显示情况:
#name.a1.a2 {color:red};
.a1.a2 {color:red};
在IE7+和FF/OPERA/SAFARI都支持,在IE6上则被理解为:
#name.a2 {color:red};
.a2 {color:red};
前面的类名会被后面的类名覆盖掉。可考虑不用类组合的形式。
本学习内容来源于 前端客 的分享:http://www.qdker.com/archives/138.html