5

我有多个锚元素。偶尔单击它们没有任何作用，所有 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;
}

谢谢你。

4

3 回答 3

1

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

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

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

于 2013-04-04T20:32:26.647 回答
0

找到了解决方案：使用mouseupormousedown代替click：

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

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

于 2013-04-04T20:37:21.003 回答
0

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

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

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

这应该与您的 JSFiddle 一起在此处报告：

于 2014-01-08T10:13:02.287 回答