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 IE7¹ 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