您的位置：首页 > Web前端 > CSS

IE6 下面CSS样式覆盖的BUG

2011-08-10 14:36 197 查看

如题:

不废话直接上代码

<html>
<head>
<style>
div{width:30px;height:30px;cursor: pointer;float:left;left; }

#moveLeft{background:no-repeat scroll left bottom #0000ff;}
#moveLeft.hover{background-color:#ff0000;}
#moveLeft.disable{background-color:#00ff00;}

</style>
<body>
<div id="moveLeft"></div>
<div class="disable" id="moveLeft"></div>
<div class="hover" id="moveLeft"></div>
<div class="hover disable" id="moveLeft"></div>
<div class="disable hover" id="moveLeft"></div>
</body>
</html>

火狐VS IE6 对比图

对比第二和第三个

<div class="disable" id="moveLeft"></div>
<div class="hover" id="moveLeft"></div>发现IE6还是支持#id.class 这种选择器格式的。但是从上面的差异中可以发现在IE6中相同的ID 只能定义一次这种格式，多次定义以第一次为准。并不会产生我们想象的覆盖现象。
而火狐不愧为高级的浏览器

对比地4个和第5个DIV

<div class="hover disable" id="moveLeft"></div>
<div class="disable hover" id="moveLeft"></div>容易发现在一个元素有多个Class的时候，火狐跟IE6去选择样式的优先级是不一样的
IE6下 Class=“A B”中优先级会参照当前使用的顺序，谁后使用谁优先级高，所以 B出现在A的后面， B的优先级比A高会覆盖A中重复的CSS样式，

火狐中Class="A B"的情况下优先级会参照<sttyle>样式表中A{}和B{}的定义的先后顺序，相同类型的CSS选择器下谁后定义谁优先级高。显然 disable 是在hover后面定义的，所以火狐中最后2个DIV显示的颜色一样

一上只是个人研究的经验总结，并没有关于浏览器核心渲染方面的理论知识和文档材料作为佐证。

有其他见解的同学们欢迎指正!

欢迎大家拍砖！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ie css class scroll 浏览器 div

相关文章推荐

新的分享

章节导航