1

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

我只在 Chrome、Opera 和 Safari 上看到过这个问题，所以我想这是一个 webkit 问题。

我正在对按钮进行样式设置以赋予它们“推动”效果。
问题是，如果我在某些点、在某些高度单击按钮，它不会触发“单击”事件。

我创建了一个小提琴来更好地理解我的问题；基本上这是我正在使用的CSS：

input[type="submit"], input[type="button"], button, .btn{
    position: relative;
    display: inline-block;
    border: none;
    padding: 4px 10px;
    text-align: left;
    color: #222222;
    font-weight: bold;
    background-color: transparent;
    top: 1px;
    bottom: 0;
    vertical-align: baseline;
    transition: none!important;
    -webkit-transition: none!important;
}
input[type="submit"], input[type="button"], button, .btn{
    background-color: #444444;
    color: #FFF!important;
    text-decoration: none;
    text-align: center;
    border-bottom: 3px solid rgba(0,0,0,0.75);
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .btn:hover{
    top: 0;
    border-bottom-width: 4px;
    cursor: pointer;
}
input[type="submit"]:active, input[type="button"]:active, button:active, .btn:active, .btn.selected{
    top: 4px;
    border-bottom-width: 0;
    bottom: 0;
}
.btn:hover, .btn:active{
    color: #FFF;
}

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

一开始我以为只有当光标正好在按钮文本上时它才起作用，但是如果我单击底部边框它就起作用了。

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

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

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

谢谢你。

4

1 回答 1

1

试试这个：http: //jsfiddle.net/Lc9EW/

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

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

-moz-background-clip: padding;
background-clip: padding-box; 
-webkit-background-clip: padding;
于 2013-11-06T11:46:45.557 回答