Question

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

我确定这是一个CSS问题，但我在CSS中找不到任何错误。我认为这个问题可能存在于边缘（4px底部边缘但是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;
}

谢谢。

Answer 1

如您所料，这似乎确实是一个保证金问题。

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

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

Answer 2

找到解决方案：使用mouseup或mousedown代替click：

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

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

Answer 3

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

不可点击区域水平一致;整个像素行无法点击。如果修改了顶部和底部填充，我发现每个按钮最多有两个不可忽略的像素行。

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

这应该与你的JSFiddle一起报告：

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

CSS - 按钮不时无法点击？

3 个答案: