CSS 按钮/链接在某些点击时未注册

Question

我想要一个按钮在单击时“按下”。但是，我尝试的方法产生了不良影响 - 按钮上某些位置的一些点击没有被注册。

这个问题与 JavaScript 无关。 我已经链接到下面的 JSFiddle，它使用 JavaScript 单击事件监听器，但这只是为了更好地描述问题。我面临的实际问题与事件监听器无关 - 在不同位置单击时超链接本身不起作用(浏览器不会导航到链接页面，即使 CSS :active 类工作正常，浏览器的行为就像没有点击一样)。

The fat, depressable button I'm trying to style.

我正在使用的 CSS:

a.fatButton {
    display: inline-block;
    position: relative;
    margin: 8px;
    padding: 16px;
    background: #faa;
    border-radius: 16px;
    box-shadow: 0 8px 0 0 #f88;
    text-decoration: none;
    color: #000;
}
a.fatButton:active {
    top: 8px;
    box-shadow: none;
}

容器 div 中按钮的 HTML:

<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>

这是一个更深入地描述问题的 JSFiddle:http://jsfiddle.net/g105b/d3Y9X/

这里是问题的记录:http://youtu.be/N6UfWdbA1Ac

问题是当按钮有任何移动时......这可能是“top”属性的变化 - 如本例所示 - margin-top，负边距底部，translateY，padding- top ...必须有一种方法可以创建这种类型的按钮按下效果而不会出现这个问题吗？

我使用的是用于录制视频的 Chrome 29，但问题在 Firefox 23 中也很明显，尽管“无用区域”位于 Firefox 按钮上的不同位置。

Answer 1

这是因为您正在使用 :active 选择器移动按钮。元素的顶部改变了 8px，这发生在用 Javascript 注册点击事件之前。因此，当您在前 8 个像素内点击时，不会记录点击。

您也可以通过更改 :active 中的 padding-top 值来实现相同的效果。

a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

更新 fiddle :http://jsfiddle.net/NT5e2/