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

Question

我最近注意到样式 <a> 有问题和 <button>与显示 block 或内联 block 一起出现的标签，一些填充量以及相对于调整位置的位置 when :active 例如

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 对点击事件的定义:

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:

1. mousedown
2. mouseup
3. click

您显然是在同一屏幕位置上单击。问题是 mousedown 事件在链接的填充上，而 mouseup 事件在链接(文本)上。

参见 http://jsfiddle.net/ZCkpE/8/ .

• 如果您在 padding 上移动鼠标并在 padding 上移动 mouseup，则会触发点击事件。
• 如果您在 padding 上 mousedown 移动鼠标，但现在在 text 上 mouseup，则没有点击事件。

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

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