a { display: inline-block; padding: 3px 6px; background: #aff; }
a:active { position: relative; top: 1px; left: 1px; }
问题是文本周围有一个1像素的不可见框,其中点击未被浏览器或JavaScript注册,但动画仍然会出现.这种情况发生在(至少)Windows上的Firefox和Chrome中.
这是一个有效的例子：
http://dl.dropbox.com/u/1186571/Test.htm
我也试过使用保证金代替仓位：相对;并尝试使用javascript设置.active而不是使用：active.
为了清楚起见：我正在谈论链接中的死区(在我的示例中为蓝色框),但在文本的边界框之外.这是我正在谈论的区域用深蓝色突出显示的图像：
解决方法
a:active {
padding: 4px 5px 2px 7px;
}
见http://jsfiddle.net/ZCkpE/5/(感谢Kevin Gurney创建初始代码)
更新：
它似乎是浏览器中的一个错误(或预期的行为). W3.org对点击事件的定义：
The click event occurs when the
pointing device button is clicked over
an element. A click is defined as a
mousedown and mouseup over the same
screen location. The sequence of these
events is:
- mousedown
- mouseup
- click
您显然是在同一屏幕位置点击.问题是mousedown事件在链接的填充上,并且mouseup事件在链接(文本)上.
见http://jsfiddle.net/ZCkpE/8/.
>如果您在填充上进行了mousedown,则在填充上移动鼠标和鼠标,单击事件将触发.
>如果你在填充上移动鼠标但是现在鼠标移动到文本上,则没有单击事件.
这意味着click事件不会将填充和文本本身视为相同的元素.
没有使用太多“黑客”的解决方案：制作一个重叠的div：http://jsfiddle.net/ZCkpE/13/.适用于Chrome,Firefox.在IE中,如果单击文本,它将起作用.如果单击填充,则不会激活：活动样式.
