如何消除位置相对按钮上的死区？(HTML/CSS)

Question

我最近注意到样式<a>和<button>标签的问题出现在显示块或内联块,一定量的填充,以及位置相对于调整位置时:活动例如

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

我也试过使用边距而不是position: relative;尝试.active使用javascript 设置而不是使用:active.

为了清楚起见:我正在谈论链接中的死区(在我的示例中为蓝色框),但在文本的边界框之外.这是我正在谈论的区域用深蓝色突出显示的图像:

http://dl.dropbox.com/u/1186571/example.png

Answer 1

当链接处于活动状态时，您将其移开，这样您就不再单击该链接。使用这个可以解决这个问题：

a:active { 
    padding: 4px 5px 2px 7px;
}

请参阅http://jsfiddle.net/ZCkpE/5/（感谢 Kevin Gurney 创建初始代码）

更新：

这似乎是浏览器中的一个错误（或预期行为）。W3.org对点击事件的定义：

当在元素上单击指点设备按钮时，将发生单击事件。单击定义为在同一屏幕位置上按下鼠标和松开鼠标。这些事件的顺序是：

1. 鼠标按下
2. 鼠标向上
3. 点击

显然您正在单击同一屏幕位置。问题在于mousedown事件位于链接的填充上，并且mouseup事件位于链接（文本）上。

请参阅http://jsfiddle.net/ZCkpE/8/。

• 如果您在padding上按下 mousedown并在 padding 上移动鼠标，然后将 mouseup 放在padding上，则会触发 click 事件。
• 如果您在填充上按下 mousedown来移动鼠标，但现在在文本上使用 mouseup ，则不会有单击事件。

这意味着点击事件不会将填充和文本本身视为同一元素。

不使用太多“hack”的解决方案：制作一个覆盖div：http: //jsfiddle.net/ZCkpE/13/。适用于 Chrome、Firefox。在 IE 中，如果您单击文本，它就会起作用。如果单击填充，则 :active 样式不会激活。