当前位置: 代码迷 >> Web前端 >> IE6 中 A 标签 hover 伪类特殊性过高的有关问题(转载)
  详细解决方案

IE6 中 A 标签 hover 伪类特殊性过高的有关问题(转载)

热度:649   发布时间:2012-09-25 09:55:58.0
IE6 中 A 标签 hover 伪类特殊性过高的问题(转载)

原文地址:http://topic.csdn.net/u/20100701/11/ed9815fc-a684-4de7-b3dd-0f84323fb9e0.html?75618

向作者致敬!

?

?

昨天在 【分享】<a>标签的伪类书写顺序问题 中说到,A 标签的’:link’,’:visited’,’:hover’,’:actived’伪类的声明有顺序的限制,如果顺序不正确可能导致某些伪类的声明无效(其实是被其他的覆盖掉了)。但是,在 IE6 中声明顺序即使不正确, ‘:hover’ 会依然有效,这是为什么呢?

? 昨天也有童鞋已经说出了答案:它的根本原因是特殊性计算的问题。今天就这个问题,做一个详细点儿的说明。

? 各位看官注意,精彩的地方到了。

? 先做个简要的名词解释 :
? 1. IE6(Q)代表的是IE6 的 Quirks Mode;
? 2. IE6(S)代表的是IE6 的 Standards Modes;

? 为说明方便,排除其它因素对选择器优先级的影响,我们仅关注选择器的特殊性和出现的顺序。

? 这里,我们讨论IE6(S)(Q)/IE7(Q)/IE8(Q)下 A 元素 “:hover” 的bug,其中,IE6 中伪类声明顺序不正确但是 ‘:hover’ 依然有效就是此类问题的一个表现。

? 问题来了!在IE6(S)(Q)/IE7(Q)/IE8(Q)下,“A:hover”的优先级是否真的无法超越?请看如下代码:

HTML code
<style type="text/css"> a{background-color:#d4d4d4;font-size:14px;font-weight:bold;} a:hover{background-color:red;} /* [0,0,1,1] */ div.div1 a{background-color:yellow;} /* [0,0,1,2] */ </style> <div class="div1"> <a class="a1" href="#">A:hover bug</a> </div>


? 观察代码,选择器“a:hover”的特殊性为“[0,0,1,1]”,选择器“div.div1 a”的特殊性为“[0,0,1,2]”,很明显选择器“div.div1 a”中的背景色(yellow)应该覆盖选择器“a:hover”中的背景色(red),然而从上表得到的测试结果来看,在 IE6(S)(Q)/IE7(Q)/IE8(Q)下却无法覆盖。难道真如传说中所言IE6(S)(Q)/IE7(Q)/IE8(Q)下“A:hover” 无法超越!

? 修改选择器“div.div1 a”为“.div1 a.a1”,如下:

HTML code
.div1 a.a1{background-color:yellow;} /* [0,0,2,1] */


? 此时,选择器“.div1 a.a1”的特殊性为“[0,0,2,1]”。经过在各浏览器中的测试结果表明,IE6(S)(Q)/IE7(Q)/IE8(Q) 中的 “:hover” 终于被覆盖。这次竟然超越了!

? 继续,修改选择器“.div1 a.a1”为“div.div1 .a1”,如下:

HTML code
div.div1 .a1{background-color:yellow;} /* [0,0,2,1] */


此时,选择器“div.div1 .a1”的特殊性也为“[0,0,2,1]”。经过测试,IE6(S) (Q)/IE7(Q)/IE8(Q)下 的 “:hover” 竟然起死回生了。竟然无法超越,没道理啊,明明特殊性的值更上面测试中的值的相同,Why :?IE总是给人“惊喜”,好无奈!!

? 可见,只是在[0,0,c,d]上大于 a:hover 样式的特殊性,并不能保证能够超越 a:hover 的特殊性。

? 再次调整代码,给div设置一个ID,代码调整后如下:

HTML code
<style type="text/css"> a{background-color:#d4d4d4;font-size:14px;font-weight:bold;} a:hover{background-color:red;} /* [0,0,1,1] */ #divID .a1{background-color:yellow;} /* [0,1,1,0] */ </style> <div id="divID"> <a class="a1" href="#">A:hover bug</a> </div>



? 此时,选择器“#divID .a1”的特殊性为“[0,1,1,0]”。经测试,IE6(S)(Q)/IE7(Q) /IE8(Q) 终于顶不住了,”:hover”回归正常。

? 经反复测试,我们得出结论:IE6(S) (Q)/IE7(Q)/IE8(Q)“*:hover”的特殊性没有特定的规律可循,只有特殊性b的值大于选择器“*:hover”特殊性b的值时(当然 a值要相等),IE6(S) (Q)/IE7(Q)/IE8(Q)下“A:hover”优先级才能保证被超越!

? 总之,想要在 IE6(S) (Q)/IE7(Q)/IE8(Q) 得到正常的 ‘:hover’,有一个比较保险的办法:选择器特殊性b的值要大于选择器“*:hover”特殊性b的值时(当然a值要相等)

? 希望从此以后,各位童鞋可以轻松的收拾在 IE 中不大听话的 ‘a:hover’

  相关解决方案