IE6对好几个CSS款式的分析

2021-01-20 13:56 jianzhan
检测编码

拷贝编码
编码以下:

<html>
<head>
<title>IE6对好几个CSS款式的分析</title>
<style type="text/css">
body { font-size:12px; }
.West { color:Green; }
.West.Color { color: Red; }
</style>
</head>
<body>
<p class="West">高手兄,师傅被妖怪抓走了。</p>
<p class="West Color">2师兄,师傅被妖怪抓走了。</p>
<p class="East Color">高手兄,2师兄被妖怪抓走了。</p>
<p class="East">高手兄,师傅和2师兄被妖怪抓走了。</p>
<p class="Color">师傅安心吧,高手兄会来救大家的。</p>
</body>
</html>

分析实际效果


检测编码
提升了新的款式

拷贝编码
编码以下:

<html>
<head>
<title>IE6对好几个CSS款式的分析</title>
<style type="text/css">
body { font-size:12px; }
.West { color:Green; }
.West.Color { color: Red; }
.East.Color { color: Blue; }
</style>
</head>
<body>
<p class="West">高手兄,师傅被妖怪抓走了。</p>
<p class="West Color">2师兄,师傅被妖怪抓走了。</p>
<p class="East Color">高手兄,2师兄被妖怪抓走了。</p>
<p class="East">高手兄,师傅和2师兄被妖怪抓走了。</p>
<p class="Color">师傅安心吧,高手兄会来救大家的。</p>
</body>
</html>


分析实际效果


假如款式改为这样


拷贝编码
编码以下:

<html>
<head>
<title>IE6对好几个CSS款式的分析</title>
<style type="text/css">
body { font-size:12px; }
.West { color:Green; }
p.West.Color { color: Red; }
.East.Color { color: Blue; }
</style>
</head>
<body>
<p class="West">高手兄,师傅被妖怪抓走了。</p>
<p class="West Color">2师兄,师傅被妖怪抓走了。</p>
<p class="East Color">高手兄,2师兄被妖怪抓走了。</p>
<p class="East">高手兄,师傅和2师兄被妖怪抓走了。</p>
<p class="Color">师傅安心吧,高手兄会来救大家的。</p>
</body>
</html>

分析結果,原先在IE6中显示信息为蓝色的都显示信息为鲜红色。而FF维持不会改变。
结果

在IE6中,持续拼写的两个款式,.class_1.class_2,鉴别为后1个.class_2。后界定的优先选择。

在FF中,务必配对详细的款式,少1个都不鉴别。

假如再加了p限制,则优先选择级高于不加p的款式,参照CSS优先选择级。