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 に答える