在镀铬的div按钮上的小死角

Question

我无法解释这个。我有一个div，它是一个按钮。我使用：active psuedo类和position：relative;单击时向下轻微移动它，给它一个动画。出于某种原因，Chrome中此按钮上有一个小的死区，位于文本和按钮边缘之间。 psuedo类仍然会触发，但按钮上的Javascript却没有。如果我删除相对位置，问题就会消失。这也发生在Firefox中，但Firefox中的死区位于按钮移开的边缘，这很有意义，但也需要修复。

我创建了一个JSFiddle来显示问题：http://jsfiddle.net/dillydadally/CUHA7/6/

知道为什么会这样吗？有办法解决吗？

Answer 1

CSS。这是因为保证金：10px; #btn

修改

如果您使用 onmousedown 而非 onclick ，则可以使用。

解释

伪节点在onClick之前被激活。如果将以下值更改为：active从2px更改为20px。即使您点击按钮的中间部分，您也会看到这种情况发生。

因此，在左侧和顶部的新值设置为：active之后，鼠标不再位于div的顶部，无法注册单击（ 按下并释放 ）。

但仍然会触发 onmousedown ，因为它不依赖于鼠标按钮的释放。