01月07, 2013

IE6下特殊selector规则的表现

在IE6下,.a.x这样的selector,只会识别.x(也就是第二个className)。如果这样写.a.x{background: red;} .b.x{background:blue;}会发现:即使.a和.b指的是两个不同的元素,最后这两个元素的背景色都会是blue。 代码如下:

<style type="text/css">
    div{
        height: 50px;
        border: 1px solid #333;
    }
    .red.box{
        background: red;
        height: 100px;
    }
    .blue.box{
        background: blue;
        width: 200px;
    }
    .green.box{
        background: green;
        border: 3px dashed green;
    }
</style>
<script type="text/javascript" src="http://s0.qhimg.com/lib/qwrap/1141.js"></script>
<script type="text/javascript">
function changeCls(cls){
    W('div').removeClass('red').removeClass('blue').removeClass('green').addClass(cls);
}
</script>

<div id="box" class="box"></div>
<button onclick="changeCls('red')">red</button>
<button onclick="changeCls('blue')">blue</button>
<button onclick="changeCls('green')">green</button>

结果: 在chrome下,点击三个按钮,分别出现对应的样式。 但是在IE6下,无论点击哪个按钮,div的样式不变,符合的样式规则都是:

height: 100px; width: 200px; background: green; border: 3px dashed green;

注:IE6下有绿白相间的边框是因为CSS2指出背景只延伸到内边距,而不是边框。

IE6下的样式

IE6下的样式 运行示例: ie6

在IE6下,#a.x{background:red;} #a.y{background:blue;} #a.z{background:green;}最终的结果是:只有.red的元素的背景色会是red。而只有.green.blue的元素没有背景色。只有第一条规则生效,后两条规则无效。 代码如下:

<style type="text/css">
    div{
        height: 50px;
        border: 1px solid #333;
    }
    .red#box{
        background: red;
        height: 100px;
    }
    .blue#box{
        background: blue;
        width: 200px;
    }
    .green#box{
        background: green;
        border: 3px dashed green;
    }
    </style>
        <script type="text/javascript" src="http://s0.qhimg.com/lib/qwrap/1141.js"></script>
    <script type="text/javascript">
    function changeCls(cls){
        W('div').removeClass('red').removeClass('blue').removeClass('green').addClass(cls);
    }
    </script>

<div id="box"></div>
<button onclick="changeCls('red')">red</button>
<button onclick="changeCls('blue')">blue</button>
<button onclick="changeCls('green')">green</button>

结果: 在chrome下,点击对应的按钮就会有对应规则的样式。 但是在IE6下,只有点击red按钮,才会呈现.red#box的样式,点击其它按钮,只div的样式。

运行示例: ie6

本文链接:https://75team.com/post/ie6下特殊selector规则的表现.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。