CSS按钮：激活有时会使按钮无法正常工作

Question

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

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

按钮不希望在特定区域上运行，具体取决于您点击它们的位置。 （职位确实发生但jQuery没有启动） 这是DEMO

你会看到，如果你碰到了正确的位置，他们有时会做出反应。它有点难以注意，因为它发生了。例如，尝试按下字母A后面的接触按钮。或者点击O字母正下方的“关于”按钮。

删除时：活动功能按钮正常工作。我该如何解决这个问题？

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;
}