CSS - 按钮有时无法点击？

Question

我有多个锚点元素。偶尔点击它们不起作用，所有CSS动画都能正常运行，但链接不会打开任何页面/触发任何操作。我必须稍微移动光标，然后再次点击。

我确定这是一个CSS问题，但我在我的CSS中找不到任何错误。我认为问题可能在于边距（4px底部边距，但是在:active上有4px顶部边距），但我在许多网站上看到过这种情况，按钮却完全正常...

这些是按钮。单击它们，大约有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;
}

谢谢。

- Wordpressor

---

它们对我来说运行良好。 - Alex W

50+次点击。无法复现。使用FF浏览器。 - David

我在Chrome 26中获得了所描述的行为。 - Horen

你试过Chrome或Opera吗？在Opera中最频繁出现，然后是Chrome，在Firefox中也可以正常工作...CSS没问题吧？也许是某种浏览器的bug？ - Wordpressor

我在Chrome中看到它。大约1/20。 - Alex Marchant

Answer 1

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

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

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

- Kevin Lynch

---

请详细说明如何完成，如果我的按钮没有父级，只有文档主体本身会怎样？ - Wordpressor

Answer 2

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

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

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

- Alfred Xing

---

谢谢！不幸的是，它对我没有帮助，因为JS只是用于演示。 - Wordpressor

@Wordpressor 那么在实际问题中它只是一个链接吗？也许可以使用JS代码手动创建一个新的选项卡/窗口？ - Alfred Xing

实际上，真正的问题只是一个链接...我不想/不能使用任何JS，因为它实际上有无数个链接。 - Wordpressor

Answer 3

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

无法点击的区域在水平方向上是一致的；整个像素行都无法点击。如果同时修改了顶部和底部填充，则每个按钮最多有两个无法点击的像素行。

当修改按钮或链接的填充/边距/边框时，该错误似乎会发生在:active状态下。

应该将此报告以及您的JSFiddle提交到以下位置：

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

- Jonatan Littke