镀铬的div按钮上的小死角空间

Question

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

我创建了一个的jsfiddle，借以说明问题：http://jsfiddle.net/dillydadally/CUHA7/6/

任何想法，为什么发生这种情况？有没有办法解决它？

Answer 1

CSS。这是因为margin：10px;上#btn

编辑

如果使用onmousedown事件而的onclick它会奏效。

解释：

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

所以的左侧和顶部由设置新值后：主动，鼠标是不是在DIV的顶部了，不能注册点击（按下并释放）。

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