打印

RX3005: IE6 IE7 IE8(Q) Chrome(Q) Safari(Q) 中 A 元素的 ':hover' 及 ':active' 伪类在缺少 href 属性时会失效

作者:丁宗秋

标准参考

A 元素表示一个链接或锚点,它的 href 属性可以指定 Web 资源的位置,也可以定义一个链接到锚点位置。

A 元素的 ':hover' 伪类中定义的样式在鼠标光标掠过该标签的时候应用;而 ':active' 伪类中定义的样式则是在用户激活(点击)一个链接时应用。

关于 A 元素的详细信息,请参考 HTML 4.01 规范 12.2 The A element 中的内容。

关于 A 元素的 ':hover' 及 ':active' 伪类的详细信息,请参考 CSS2.1 规范 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus 中的内容。

问题描述

A 元素缺少 href 属性时,在 IE6 IE7 IE8(Q) Chrome(Q) Safari(Q) 中 ':hover' 和 ':active' 伪类会失效。

造成的影响

在不同浏览器下超链接的展现效果会有差异。

受影响的浏览器

IE6 IE7 IE8(Q) Chrome(Q) Safari(Q)  

问题分析

针对以上问题,使用以下测试用例说明问题,分析以下代码:A_without_href.html

<!DOCTYPE html>
<html>
<head>
<style>
  a { color:blue; }
  a:hover { color:red; }
  a:active{ color:gold; }
</style>
</head>
<body style="font:bold 40px Arial;">
  <a>A element without href attribute</a>
</body>
</html>

结果汇总如下表:

  IE6 IE71 IE8(Q) Chrome(Q) Safari(Q) IE8(S) Firefox Chrome(S) Safari(S)
:hover 无变化 红色
:active 无变化 金色

注1:IE7(S) 中存在一种特殊情况,当 A 标签的 ':hover' 伪类被加入到一个 :hover 分组(例如 p:hover, a:hover)后,其 ':hover' 伪类变得有效,而使用相同的方法 ':active' 伪类依然无效。详细测试代码请参考 IE7_A_without_href.html

从测试结果可以看出,当 A 元素缺失 href 属性后,IE6 IE7 IE8(Q) Chrome(Q) Safari(Q) 中 ':hover' 伪类和 ':active' 不再生效。

解决方案

如果需要一个 A 元素能根据用户的行为改变样式,请添加 A 元素的 'href' 属性使伪类生效。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.9
Chrome 7.0.517.0 dev
Safari 5.0.2 (7533.18.5)
Opera 10.62
测试页面: A_without_href.html
IE7_A_without_href.html
本文更新时间: 2010-09-14

关键字

A anchor hover active href 链接 伪类