在镀铬的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,因为它不依赖于鼠标按钮的释放.