为什么鼠标点击并不总是适用于样式输入按钮？

Question

在我们的应用程序中，我们使用样式化输入按钮来提交表单。出于某种原因，您必须精确点击它们才能注册点击。超过一半的时间，看起来点击按钮（即mousedown / mouseup上的更改），但没有任何反应，我们必须再次点击。如果我们只是删除css样式，按钮一直工作正常。

示例：

我们的用户非常喜欢样式按钮的外观，但不知道点击事件是否通过，有点恼火。有什么简单的方法可以解决这个问题吗？

更新

我终于能够在jsfiddle：http://jsfiddle.net/xRK4C/3/中巧妙地重现这一点。如果单击带圆角的按钮的左上角几个像素，则可以看到该行为。我在想这是因为点击时按钮会移动，这会导致鼠标在鼠标按下时位于按钮之外。我们的用户想要这个，所以有没有什么好方法可以保持3D效果而不牺牲点击区域？

Answer 1

我认为这是:active的相对定位。我猜按钮的移动会让鼠标事件变得混乱。我建议改变边距。

编辑：边距也不起作用，也不是CSS 2翻译。

你需要以某种方式移动按钮的“图像”而不移动按钮（因此点击的区域）本身，但我现在想不出任何东西。

Answer 2

去了JSFiddle网站并在那里玩弄造型。

我注意到按钮边缘的悬停成功，但点击不是。

所以，我将left:2px; top:2px;更改为left:0px; top:0px;，当然，悬停仍然有效，但点击边缘的点击成功。