IE6中a标签的伪类:hover的兼容问题
IE6仅仅支持对a标签的hover状态,IE7+添加了对a以外其它标签的支持
一个关于:hover在IE6及更早浏览器下的问题:
很多人可能都已经知道了:hover在IE6及更早浏览器下的一些兼容问题。我主要是想说一下形如a:hover span{}这样的兼容问题。有的时候为了增加一些简单的动态效果,常常会借助:hover的帮忙,比如我们时常会令鼠标经过链接时改变文字的颜色。
a:hover{color:#F00;}
<a href=”###”>鼠标经过时改变我的颜色</a>
这将在所有的浏览器中都有效。但如果换成这样:
a:hover em{color:#F00;}
<a href=”###”>鼠标经过时改变我的<em>颜色</em></a>
你会发现在IE6下什么都没有发生,样式失效。
此时,只需要再添加一个a:hover{}样式就可以解决这个问题了,里面可以是zoom, padding, margin等属性。
a:hover{zoom:1;}
造成:hover失效的是IE6的haslayout。关于haslayout,详情可点击hasLayout IE浏览器bug的来源