调整字号

IE6 与 :hover 相关的一些 bug

IE6 的 :hover 伪类存在着一系列问题,简单记录:

只有 a 元素支持 :hover

这个想必是众所周知的,IE6 只能在 a 元素上使用 :hover,其他元素上无效。如果需要,可以通过 JavaScript 的 mouseovermouseout 事件来实现,或者 mouseentermouseleave,后一组事件是前一组的不冒泡版本。

:hover 规则不生效

假设如下的规则:

a span { color: green; }
a:hover span { color: red; }

在 IE6 中,第二条规则不会生效,鼠标指向 a 元素时,a 内的 span 不会变色。这是 IE6 的另一个 bug,如果某个链接没有定义 :hover 规则,直接定义 :hover 的子元素,那么子元素的样式不会生效。查看示例页面。解决办法是必须要定义 :hover,并加上一些特定的规则或造成样式上的改变,比如 padding:0,或 border:none,或 background:none 等。注意 a 元素必须要有 href 属性,否则 hover 也不会被触发。

/* 解决 */
a span { color: green; }
a:hover { padding:0; } /* 或 border:none  */
a:hover span { color: red; }

:hover 权重计算的 bug

IE6 对 :hover 伪类的权重计算时也有 bug,按照 CSS2.1 计算权重(也叫特殊性,specificity)的规则,用一组数字 a,b,c,d 来计算时,伪类和 class 都应该算入 c 中,也就是说下面两条规则的权重一样:

a:hover { color: green; } /* 权重 0,0,1,1 */
.w a { color: orange; } /* 权重 0,0,1,1 */

权重一致的情况下,后面的规则应当覆盖前面的。但在 IE6 中不是这样,文字依然为绿色。查看示例页面

经过测试,如果给第二条规则再加一个 class,使权重变成 0,0,2,1,就可以覆盖第一条了,也许在 IE6 中一个伪类算作 1.5?

还没有评论,沙发空缺中……
flight