打印

RS3008: IE6 IE7 IE8(Q) 不支持 A 元素以外的其他元素的 ':active' 伪类

作者:武利剑

标准参考

关于 ':active' 伪类

':active' 伪类适用于一个元素被用户激活的时候。如鼠标在元素范围区域中按下但还没有释放的时候。

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

问题描述

在 CSS 1 历史规范中 ':link '、':visited '、':hover'、 ':active' 伪类仅作用于 A 标记中,这导致根据早期 CSS 版本实现的浏览器 IE6 IE7 IE8(Q) 不支持 A 元素以外的其他元素的 ':active' 伪类。

造成的影响

如果在非 A 元素上使用了 ':active' 伪类,会使非 A 元素预期的激活效果在 IE6 IE7 IE8(Q) 中无效,但不会影响使用和布局。

受影响的浏览器

IE6 IE7 IE8(Q)  

问题分析

对于此问题,我们通过以下的测试用例来说明。

分析以下代码:

<style type="text/css">
  p:active {
    color: red;
  }
</style>
<p>Aloha!</p>
  • 以上代码对 P 元素声明了 ':active' 伪类;

根据CSS2.1 规范中的描述可知,当鼠标在 'Aloha!' 上按下不释放时,P 标记中的字体会变成红色。

这段代码在不同的浏览器环境中的表现在 'Aloha!' 按下鼠标左键,但不释放情况下的截图):

IE6 IE7 IE8(Q) IE8(S) Firefox Opera Safari Chrome

所以对于 :active 伪类的支持情况,如下表:

IE6 IE7 IE8(Q) IE8(S) Firefox Safari Opera Chrome
N N N Y Y Y Y Y

【注】:实际中其他除常用 HTML 标记同样适用此例,并非仅 P 标记自身不支持,本文中不再一一测试证明。

解决方案

使用 JavaScript 绑定 onmousedown onmouseup 事件模仿 ‘:active’ 伪类效果;
使用 Whatever:hover,该组件利用 IE 特有的 CSS 行为(behavior)及通过 JavaScript 来模拟 ':active' 伪类的效果。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.3
Chrome 6.0.437.3 dev
Safari 5.0
Opera 10.54
测试页面: active_pseudo-class.html
本文更新时间: 2010-07-08

关键字

active Pseudo class