日期:2014-05-17  浏览次数:20760 次

【分享】当 A 标签缺少 href 属性, :hover还有效么?
A标签伪类,我们用的较多,可以加强交互性。

但是,A标签上的伪类,是存在一些兼容性问题的,前段时间曾分享过一篇此类问题: 【分享】IE6 中 A 标签 hover 伪类特殊性过高的问题

这次发现的问题,依然出在IE6 的:hover上。
以 下说明中,Q代表Quirks Modes 即混杂模式, S 代表 Standards Modes 即标准模式。关于模式的说明,请参见: 【分享】浏览器兼容性问题综述——正确的认识浏览器兼容性问题

先看代码:
HTML code
<style>
    a:hover {
       color: red
    }
</style>
<a>link</a>
有没有发现以上代码有什么问题? A 标签没有设置 href 属性。
依标准来讲,当鼠标悬停在 ‘link’ 上时,’link’ 应该变成红色。
这段代码,在浏览器中运行的结果:当鼠标悬停在 ‘link’ 上方时,只有IE6(QS),IE7(QS)和IE8(Q),没有变红,其他浏览器中都变红了。

可见,在IE6(QS),IE7(QS)和IE8(Q)下,A标签没有 href属性时,设置:hover伪类是无效的。
另外,":hover"属性作用在普通标记上,在IE6下是不被支持的,只有IE7之后版本与其他浏览器支持普通元素的伪类样式。

所以,在使用A 标签上的 :hover时,一定要注意以上两个问题。尽量保证页面工作在标准模式下。

更多兼容性问题:【分享】浏览器兼容性问题目录

------解决方案--------------------
这个问题,以前早就发现了!!
------解决方案--------------------
谢谢楼主分享
------解决方案--------------------
的确,IE7支持其他标记的:hover后却很缺心眼子的不支持纯A标记的:hover了~~