javascript - 如果css div：active移动它，div onclick事件将不会触发

我希望标题足够准确，以描绘我所面临的问题。

我有一个div（尝试了多种不同的东西：a，span，button，都面临同样的问题），点击它时onclick事件将会即使将调用css div:active，也不要开火。

这似乎是由于div:active我设置top: 6px以进行＆＃34;下推＆＃34;有点效果。效果看起来不错，只是有时，如果你点击元素的顶部，或者出于某种原因在中心，div会出现＆＃34;移出＆＃34;的方式，而不是调用onclick事件。

我认为一个好的解决方案是将元素包装在另一个div中，然后将onclick事件附加到该div。令我惊讶的是，点击还没有向按钮的顶部或中间点火。

如果我删除了top: 6px底部的div:active，则按钮工作正常，它只是没有相同的＆＃34;推入＆＃34;效果。

我发现它很难解释，所以这里有一个截图（蓝色区域是onclick赢得的地方）：

button that doesn't fire onclick

并且这里是初始尝试的代码：http://jsfiddle.net/RS5Q5/6/

以及将onclick侦听器移到外面的代码：http://jsfiddle.net/RS5Q5/4/（除了图片上的蓝色部分外，onclick将在div中的任何地方触发）

还值得注意的是，中间和底部的蓝色区域在firefox中看起来很好，但不是chrome或safari。顶部的蓝色区域仍然是个问题。

对这种奇怪行为的任何修复或解释？任何指导都将不胜感激。谢谢。