CSS - 按钮有时无法点击？答案

【问题标题】：CSS - buttons are unclickable from time to time?CSS - 按钮有时无法点击？
【发布时间】：2013-03-27 02:35:42
【问题描述】：

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

我确定这是一个 CSS 问题，但我在我的 CSS 中找不到任何问题。我认为问题可能在于边距（4px 下边距但 4px 上边距 on :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;
}

谢谢。

【问题讨论】：

它们对我来说很好用。
50 多次点击。无法重现它。使用 FF 浏览器。
我在 Chrome 26 中得到了描述的行为
你试过 Chrome 或 Opera 吗？它在 Opera 中最常见，然后是 Chrome，在 Firefox 中通过... CSS 可以正常工作吗？那么可能是某种浏览器错误？
我在 Chrome 中看到了它。大约 1/20。

标签： css button hover margin

【解决方案1】：

正如您所怀疑的，这似乎确实是一个边距问题。

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

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

【讨论】：

您能否详细说明如何操作？如果我的按钮没有父母，只有身体本身怎么办？

【解决方案2】：

找到解决方案：使用mouseup 或mousedown 而不是click：

$('.button').mouseup(function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/4nz4v/3/

【讨论】：

谢谢！不幸的是，它对我没有帮助，因为 JS 仅用于演示。
@Wordpressor 所以在真正的问题中它只是一个链接？也许使用 JS 代码并手动创建一个新的选项卡/窗口？
没错，真正的问题只是一个链接......我不想/不能使用任何JS，因为它实际上是无数个链接。

【解决方案3】：

这是一个错误。这是非常一致的：您只需要找到不可点击的行。再次检查您的 JSFiddle，找到文本下方 2 或 3 像素的行。那是您根本无法单击它的地方。如果找不到，请将光标从按钮底部缓慢移动到顶部，一次一个像素，点击每个像素。

不可点击区域横向一致；整个像素行是不可点击的。如果修改了顶部和底部填充，我发现每个按钮最多有两个不可点击的像素行。

在:active状态下修改按钮或链接的内边距/边距/边框时似乎会出现该错误。

这应该与您的 JSFiddle 一起报告，在这里：

https://bugs.webkit.org/enter_bug.cgi
https://code.google.com/p/chromium/issues/list -> '新问题'。

【讨论】：