【分享】当 A 标签缺少 href 属性, :hover还有效么?

WebAdvocate 2010-07-30 04:28:48
A标签伪类,我们用的较多,可以加强交互性。

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


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


先看代码:
  1. <style>
  2. a:hover {
  3. color: red
  4. }
  5. </style>
  6. <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时,一定要注意以上两个问题。尽量保证页面工作在标准模式下。

更多兼容性问题:【分享】浏览器兼容性问题目录
...全文
给本帖投票
841 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
liudandanxunyi 2011-07-01
  • 打赏
  • 举报
回复
那有没有解决的方法啊
zc_china 2010-08-29
  • 打赏
  • 举报
回复
多谢分享~~
mochimo 2010-08-02
  • 打赏
  • 举报
回复
的确,IE7支持其他标记的:hover后却很缺心眼子的不支持纯A标记的:hover了~~
dmtlyc7517 2010-07-30
  • 打赏
  • 举报
回复
谢谢楼主分享
q305009858 2010-07-30
  • 打赏
  • 举报
回复
这个问题,以前早就发现了!!

5,007

社区成员

发帖
与我相关
我的任务
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧

手机看
关注公众号

关注公众号

客服 返回
顶部