IE6对多个CSS样式的解析

2024-07-11 08:26:30

字体：大中小

来源：转载

供稿：网友

测试代码

复制代码

代码如下:
<html>
<head>
<title>IE6对多个CSS样式的解析</title>
<style type="text/css">
body { font-size:12px; }
.West { color:Green; }
.West.Color { color: Red; }
</style>
</head>
<body>
大师兄，师傅被妖怪抓走了。
二师兄，师傅被妖怪抓走了。
大师兄，二师兄被妖怪抓走了。
大师兄，师傅和二师兄被妖怪抓走了。
师傅放心吧，大师兄会来救我们的。
</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>
大师兄，师傅被妖怪抓走了。
二师兄，师傅被妖怪抓走了。
大师兄，二师兄被妖怪抓走了。
大师兄，师傅和二师兄被妖怪抓走了。
师傅放心吧，大师兄会来救我们的。
</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>
大师兄，师傅被妖怪抓走了。
二师兄，师傅被妖怪抓走了。
大师兄，二师兄被妖怪抓走了。
大师兄，师傅和二师兄被妖怪抓走了。
师傅放心吧，大师兄会来救我们的。
</body>
</html>

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

上一篇：css之自动换行实现代码

下一篇：彻底弄明白CSS3的Media Queries(跨平台设计)