Html 样式按钮干扰单击事件

首先：对不起，我的英语不好

我只见过Chrome、Opera和Safari的问题，所以我想这是webkit的问题

我正在设计按钮的样式，使其具有“按下”效果。
问题是，如果我在特定的点、特定的高度单击按钮，它不会触发“单击”事件

更好地理解我的问题；基本上这就是我正在使用的css：

输入[type=“submit”]，输入[type=“button”]，按钮，.btn{
位置：相对位置；
显示：内联块；
边界：无；
填充：4px10px；
文本对齐：左对齐；
颜色：#22222；
字体大小：粗体；
背景色：透明；
顶部：1px；
底部：0；
垂直对齐：基线；
过渡：无！重要；
-webkit转换：无！重要；
}
输入[type=“submit”]，输入[type=“button”]，按钮，.btn{
背景色：#4444；
颜色：#FFF！重要；
文字装饰：无；
文本对齐：居中；
边框底部：3倍实心rgba（0,0,0,0.75）；
}
输入[type=“submit”]：悬停，输入[type=“button”]：悬停，按钮：悬停，.btn:hover{
排名：0；
边框底宽：4px；
光标：指针；
}
输入[type=“submit”]：活动，输入[type=“button”]：活动，按钮：活动，.btn:active，.btn.selected{
顶部：4px；
边框底宽：0；
底部：0；
}
.btn:悬停，.btn:活动{
颜色：#FFF；
}

我希望它靠近按钮顶部（我增加“顶部”，因此，如果我向下移动按钮太多，光标将不再位于按钮上，这是正常的行为），但它在文本下也不起作用。
那是我没想到的

一开始，我认为只有当光标正好位于按钮文本上时，它才起作用，但如果我单击底部边框，它就会起作用

到目前为止，我最好的猜测是元素的“移动”会干扰单击事件（就像我在释放鼠标之前按下鼠标按钮并移动光标一样）

只是想知道是否有人有这个问题并解决了

在Firefox和IE10上，我没有问题（只是接近顶部，但这是预期的行为）

谢谢。

试试这个：

处于活动状态时，它在顶部区域上使用透明边框：

margin-top: -5px;
border-top: 15px solid transparent;
border-bottom-width: 0px;

-moz-background-clip: padding;
background-clip: padding-box; 
-webkit-background-clip: padding;

试试这个：

处于活动状态时，它在顶部区域上使用透明边框：

margin-top: -5px;
border-top: 15px solid transparent;
border-bottom-width: 0px;

-moz-background-clip: padding;
background-clip: padding-box; 
-webkit-background-clip: padding;

---

谢谢你的回答。在FF和IE上可以正常工作，但在Chrome/webkit上，如果我完全点击文本，则无法正常工作。不知道，抱歉：（谢谢你的回答。在FF和IE上可以正常工作，但在Chrome/webkit上，如果我完全点击文本，则无法正常工作。不知道，抱歉：(