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

Question

点击时我想要一个按钮"压下".但是,我尝试过的方法会产生不良影响 - 按钮上某些位置的某些点击不会被注册.

这个问题与JavaScript无关.我已经链接到下面的JSFiddle,它使用JavaScript click事件监听器,但这只是为了更好地描述问题.我面临的实际问题与事件监听器没什么关系 - 当在各个地方点击时,超链接本身不起作用(浏览器没有导航到链接页面,即使CSS :active类工作正常,浏览器也表现为如果没有点击).

我想要造型的胖子,可压下按钮.

我正在使用的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

问题是当按钮有任何移动时......这可能是"顶部"属性的变化 - 如本例所示 - 边缘顶部,负边缘底部,平移底部,填充顶部..必须有一种方法来创建这种类型的按钮效果而不会出现这个问题吗？

我使用的是用于录制视频的Chrome 29,但问题在Firefox 23中也很明显,尽管"dud区域"位于Firefox中按钮的不同位置.

Answer 1

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

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

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

更新的小提琴： http: //jsfiddle.net/NT5e2/