html - CSS 按钮 :active sometimes makes the button to not function

Question

每当我在 CSS 中使用它时(这对我很重要):

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

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

您会发现，有时它们不会使用react，具体取决于您是否击中了正确的位置。它有点难以注意到，因为它发生了。例如，尝试点击字母 A 下方一点点的联系按钮。或者点击字母 O 下方的关于按钮。

当我删除 :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;
}