[转]IE6对多个CSS样式的解析

转载自: http://www.cnblogs.com/0417/archive/2010/07/15/1778033.html

问题描述

如果样式写成这样<p class="class_1 class_2">，那么在IE6和FF(IE6+同FF)下会显示为不同的效果。

测试代码

01
<html>

02
<head>

03
    <title>IE6对多个CSS样式的解析</title>

04
    <style type="text/css">

05
        body { font-size:12px; }

06
        .West { color:Green; }

07
        .West.Color { color: Red; }

08
    </style>

09
</head>

10
<body>

11
    <p class="West">大师兄，师傅被妖怪抓走了。</p>

12
    <p class="West Color">二师兄，师傅被妖怪抓走了。</p>

13
    <p class="East Color">大师兄，二师兄被妖怪抓走了。</p>

14
    <p class="East">大师兄，师傅和二师兄被妖怪抓走了。</p>

15
    <p class="Color">师傅放心吧，大师兄会来救我们的。</p>

16
</body>

17
</html>

解析效果

测试代码

增加了新的样式

01
<html>

02
<head>

03
    <title>IE6对多个CSS样式的解析</title>

04
    <style type="text/css">

05
        body { font-size:12px; }

06
        .West { color:Green; }

07
        .West.Color { color: Red; }

08
        .East.Color { color: Blue; }

09
    </style>

10
</head>

11
<body>

12
    <p class="West">大师兄，师傅被妖怪抓走了。</p>

13
    <p class="West Color">二师兄，师傅被妖怪抓走了。</p>

14
    <p class="East Color">大师兄，二师兄被妖怪抓走了。</p>

15
    <p class="East">大师兄，师傅和二师兄被妖怪抓走了。</p>

16
    <p class="Color">师傅放心吧，大师兄会来救我们的。</p>

17
</body>

18
</html>

19
<br>

解析效果

如果样式改成这样

01
<html>

02
<head>

03
    <title>IE6对多个CSS样式的解析</title>

04
    <style type="text/css">

05
        body { font-size:12px; }

06
        .West { color:Green; }

07
        p.West.Color { color: Red; }

08
        .East.Color { color: Blue; }

09
    </style>

10
</head>

11
<body>

12
    <p class="West">大师兄，师傅被妖怪抓走了。</p>

13
    <p class="West Color">二师兄，师傅被妖怪抓走了。</p>

14
    <p class="East Color">大师兄，二师兄被妖怪抓走了。</p>

15
    <p class="East">大师兄，师傅和二师兄被妖怪抓走了。</p>

16
    <p class="Color">师傅放心吧，大师兄会来救我们的。</p>

17
</body>

18
</html>

解析结果，原来在IE6中显示为蓝色的都显示为红色。而FF保持不变。

结论

在IE6中，连续拼写的两个样式，.class_1.class_2，识别为后一个.class_2。后定义的优先。

在FF中，必须匹配完整的样式，少一个都不识别。

如果加上了p限定，则优先级高于不加p的样式，参考CSS优先级。

posted on 2011-07-15 00:47 DavidYanXW 阅读(144) 评论(0) 收藏举报