Question

首先：抱歉我的英语不好。

我只看过Chrome，Opera和Safari的问题，所以我认为这是一个webkit问题。

我正在设计按钮以给它们一个“推动”效果问题是如果我在某些点上点击按钮，在某些高度，它不会触发“点击”事件。

I created a fiddle更好地了解我的问题;基本上这是我正在使用的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上我没有问题（只是靠近顶部，但这是预期的行为）。

谢谢。

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

样式按钮会干扰点击事件

1 个答案: