html - CSS button:active 有时会使按钮不起作用

Question

每当我在 CSS 中使用它时（这对我来说很重要）：

.button:active {
    position: relative;
    top: 2px;
    left:2px;
}

按钮不想在特定区域起作用，具体取决于您单击它们的位置。（位置确实发生了，但 jQuery 没有启动）这里是DEMO

您会看到有时他们不会做出反应，这取决于您是否打对了位置。它有点难以注意到，因为它发生了。例如，尝试点击字母 A 下方的联系按钮。或者点击 O 字母下方的 About 按钮。

当我删除 :active 功能按钮工作正常。我怎样才能解决这个问题？

Answer 1

我将所有按钮的高度更改为 100%，它消除了浏览器上的问题。我正在使用 Chrome。这就是我所做的。

#btnhome {
margin-left: 121px;
width: 84px;
**height: 100%;**
background-color: black;
border: none;
color: white;
font-size: 14px;
font-weight: 700;
}