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(跨平臺設計)