日期:2014-05-17  浏览次数:20558 次

关于CSS hack。自己的理解

关于css hack,主要涉及的就是IE6,IE7,IE8以及严格按照W3C标准执行的浏览器之间的区别。

以下是本人自己的测试结果。(没测试IE7)

测试代码:

<html>
<head>
<style type="text/css">
    *{font-size:30px}
    /*test1*/
    div{border:2px solid red!important;*border:2px solid blue;_border:2px solid green}
    
    /*test2*/
    #box div{color:pink}
    .a{color:yellow}
    .b{color:green!important}
</style>
</head>
<body>

<!--test1-->
<div style="height:200px;width:200px">
hello
</div>
<!--test1-->

<!--test2-->
<div id ="box">
    <div class="a">testOne</div>
    <div class="b">testTwo</div>
</div>
<!--test2-->
</body>
</html>

?

总结:

1.关于"*rule;"以及"_rule;"

??? 这条样式规则适用于IE6,8,但不支持FF。

2.关于"!important"

??? 这条样式规则适用于IE和FF。但是在解释的时候有差别。在FF下,很容易理解,就是将加了这个属性的规则优先被浏览器识别。而对于同一属性的不同的class样式块定义的优先级,在IE和FF下都能被正确解释。具体看代码。test1(把_border:2px solid green去掉)的演示说明,IE在为同一元素的CSS代码块中,可以用!important来提升样式的优先级。test2的演示说明,!important对一个良好(或称标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级,但是IE对于前者是不支持的。

?

?

?

?

?

?

?