IE6 下面CSS样式覆盖的BUG

最新推荐文章于 2021-06-25 05:08:10 发布

qqshenyunzcz

最新推荐文章于 2021-06-25 05:08:10 发布

阅读量2.4k

点赞数

分类专栏：技术文章标签： ie css class scroll 浏览器 div

本文链接：https://blog.csdn.net/qqshenyunzcz/article/details/6675727

版权

技术专栏收录该内容

17 篇文章 0 订阅

订阅专栏

如题:

不废话直接上代码

<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显示的颜色一样

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

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

欢迎大家拍砖！

qqshenyunzcz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
IE6 下面CSS样式覆盖的BUG

如题:不废话直接上代码div{width:30px;height:30px;cursor: pointer;float:left;left; }#moveLeft{background:no-repeat scroll left bottom #0000ff;}
复制链接

扫一扫