CSS - 按钮有时无法点击？

Question

我有多个 anchor 元素。偶尔点击它们什么都不做，所有的 CSS 动画都有效，但链接没有打开任何页面/触发任何操作。我必须稍微移动光标然后再次单击。

我确定这是一个 CSS 问题，但我在我的 CSS 中找不到任何错误。我认为问题可能在于边距(4px 底部边距但 4px 顶部边距:active)但我在许多网站上看到过这个并且按钮工作正常......

这是按钮。点击它们，大约 20 次点击中有一次不起作用(尽管有时第一次点击时会发生这种情况):

http://jsfiddle.net/4nz4v/ (注意按钮在点击后如何没有获得 .active 类，在最新的 Opera 和 Chrome 中对其进行了测试)

这是 CSS:

.button {
    display: inline-block;
    vertical-align: top;
    color: #000;
    background: #aaa;
    text-shadow: 1px 1px 1px #fff;
    border: 0;
    padding: 0.6em 1.2em;
    margin: 0 0 4px 0;
    text-decoration: none;  
    border-radius: 6px;
}

.button:hover {
    color: #fff;
    text-shadow: none;
}

.button:active {
    margin: 4px 0 0 0;
}

.active {
    background: #fff;
    text-shadow: none;
    color: #000;
}

谢谢。

Answer 1

正如您所怀疑的那样，这似乎确实是一个 margin 问题。

.button:active {
    margin: 4px 0 0 0;
}

删除上面的代码可以解决问题。我会删除此代码并向其父级添加填充以获得更一致的结果。