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; }

阅读全文 »

flight