IE6对多个CSS样式的解析
问题描述
如果样式写成这样<p class="class_1 class_2">，那么在IE6和FF(IE6+同FF)下会显示为不同的效果。
测试代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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">二师兄，师傅被妖怪抓走了。</p> <p class="East Color">大师兄，二师兄被妖怪抓走了。</p> <p class="East">大师兄，师傅和二师兄被妖怪抓走了。</p> <p class="Color">师傅放心吧，大师兄会来救我们的。</p></body></html> |
解析效果
测试代码
增加了新的样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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">二师兄，师傅被妖怪抓走了。</p> <p class="East Color">大师兄，二师兄被妖怪抓走了。</p> <p class="East">大师兄，师傅和二师兄被妖怪抓走了。</p> <p class="Color">师傅放心吧，大师兄会来救我们的。</p></body></html><br> |
解析效果
如果样式改成这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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">二师兄，师傅被妖怪抓走了。</p> <p class="East Color">大师兄，二师兄被妖怪抓走了。</p> <p class="East">大师兄，师傅和二师兄被妖怪抓走了。</p> <p class="Color">师傅放心吧，大师兄会来救我们的。</p></body></html> |
解析结果，原来在IE6中显示为蓝色的都显示为红色。而FF保持不变。
嗯 是IE6不支持这个选择器
我有找到一个用来使IE6支持该选择器的js
demo参见这里http://ie7-js.googlecode.com/svn/test/multiple-classes.html
该js lib见这里 http://code.google.com/p/ie7-js/
上面代码修改后如下
不过仍然和我的需求有出入，因为我给div增加多个class的操作也是用js来做的，所以这里就有问题了，解决思路可能是在添加多个class后,再调用一下这个js lib中跟multiple classes有关的函数.不过暂时没找到……
结论
在IE6中，连续拼写的两个样式，.class_1.class_2，识别为后一个.class_2。后定义的优先。
在FF中，必须匹配完整的样式，少一个都不识别。
如果加上了p限定，则优先级高于不加p的样式，参考CSS优先级。
来源：http://www.cnblogs.com/0417/archive/2010/07/15/1778033.html
相关文章
- css选择器命名规则:差异及可能产生的问题(2012-2-2 10:14:33)
- CSS精灵图片(CSS sprite)使用心得(2011-9-25 11:36:22)
- 关于CSS中@font-face 嵌入字体的用法 客户端没有字体 自动下载字体(2011-6-21 10:1:23)
- CSS Sprites 样式生成工具 3.0(图片定位坐标)(2011-6-20 15:44:43)
- JS中style属性(2011-5-23 16:45:9)
- 推荐12个漂亮的CSS3按钮实现方案(2011-5-16 9:27:50)
- 12组免费的CSS3按钮强力推荐(2011-4-19 9:49:20)
- js+css+div修饰select(2011-4-6 11:57:56)
- html/css 数字、英文不自动换行的解决办法(2011-2-11 16:59:28)
- CSS浏览器常用的兼容写法 css bug hack(2011-2-11 13:55:32)
