按钮事件和点击深度

Question

我有按钮已经给出了点击深度（即它们向下移动了几个像素：活动状态）但是它们引起了问题，因为有时单击按钮并且没有任何反应。

<button>Button</button>

button:active {
    margin-top: 5px;
}

我在jsfiddle中说明了这个问题：

http://jsfiddle.net/helenst/vUU55/

在Chrome中，文本上方和下方有一条细条，高度等于点击深度，其中点击事件不会触发。 （例如，尝试点击'B'上方的一两个像素）收到mousedown和mouseup，但点击不会触发。

在Firefox和Opera中，按钮顶部有一个相同大小的区域，鼠标点击不会响应。我觉得这更合乎逻辑，因为mousedown在按钮内，但是mouseup在它之外。如果我在此区域中单击下来但在释放之前将鼠标拖回按钮，则会激活点击。

然而，它仍然没有完全意义 - 如果我在按钮周围包装一个容器（以便所有按钮状态包含在其中），并检测容器上的事件，问题仍然存在。

如果我删除点击深度，一切都很好。

我想我可以让它响应mousedown事件然后检测文档上的mouseup，这可能会解决它 - 但它违反了正常的按钮行为，我想要一个非JavaScript的解决方案。有人可以帮忙吗？

Answer 1

如果你可以使用padding-top（或边框内的任何东西）使：活动样式工作 - 即使将border-top设置为5px也可以工作，抱歉未经测试。虽然当然会在某种程度上打破你的造型;背景顶部对齐的水平条形图像可以替换顶部边框，如果你需要它在那里，虽然一个hacky想法）。

道歉，目前无法在较新的浏览器中测试。我以前在几个地方看过这种类型的按钮，但不记得任何随便测试他们如何处理这个问题/他们使用什么代码。

几乎把它作为一个新的答案，但是不那么喜欢它： 我见过的另一个替代方案，虽然更难以添加非常大的深度（移动），但是在边框样式中使用插入和开始。