CSS - ボタンは時折クリック解除されますか？

Question

私は複数のアンカー要素を持っています。それらをクリックすると何も起こりません。すべてのCSSアニメーションが機能しますが、リンクはページを開いていない/アクションをトリガーしていません。私は少しカーソルを移動し、再度クリックしなければなりません。

私はそれがCSSの問題だと確信していますが、私は自分のCSSに間違ったものは見つけられません。私は問題がマージン（4pxの下のマージンが4pxの上の余白：アクティブにある）の余白にあるかもしれないと思うが、私は多くのウェブサイトでこれを見てきて、ボタンはうまく働いていた...

ここにボタンがある。それらをクリックすると20回のクリックのいずれかがうまくいきません（最初のクリックでも発生することがあります）。

http://jsfiddle.net/4nz4v/（クリック後にアクティブなクラスが表示されないことに注意してください。クローム）

ここでは、CSSです：

.button { 
    display: inline-block; 
    vertical-align: top; 
    color: #000; 
    background: #aaa; 
    text-shadow: 1px 1px 1px #fff; 
    border: 0; 
    padding: 0.6em 1.2em; 
    margin: 0 0 4px 0; 
    text-decoration: none; 
    border-radius: 6px; 
} 

.button:hover { 
    color: #fff; 
    text-shadow: none; 
} 

.button:active { 
    margin: 4px 0 0 0; 
} 

.active { 
    background: #fff; 
    text-shadow: none; 
    color: #000; 
} 

ありがとうございました。

Answer 1

あなたが疑問に思ったように、マージンの問題があるようです。

.button:active { 
    margin: 4px 0 0 0; 
} 

上記のコードを削除することで問題を解決します。私はこのコードを削除し、より一貫した結果を得るために、その親にパディングを追加します。

Answer 2

は解決策を見つけた：代わりにclickのmouseupまたはmousedownを使用します。

$('.button').mouseup(function() { 
    $(this).siblings().removeClass('active'); 
    $(this).addClass('active'); 
}); 

http://jsfiddle.net/4nz4v/3/

Answer 3

これはバグです。それは非常に一貫しています：あなたはそれがunclickableである行を見つける必要があります。あなたのJSFiddleをもう一度チェックして、テキストの2〜3ピクセル下の行を見つけてください。それはクリックできない場所です。見つからない場合は、ボタンの一番下から一番上までゆっくりとカーソルを1ピクセルずつ移動し、各ピクセルをクリックします。

unclickable領域は水平方向に一貫しています。全画素行はクリッキング不可能である。トップとボトムの両方のパディングが変更されていれば、ボタンあたり最大2つのクリッキング不可能なピクセル行が見つかりました。

:activeの状態でボタンまたはリンクのパディング/余白/枠線が変更されたときに、不具合が発生するようです。 > '新しい問題' -

• https://bugs.webkit.org/enter_bug.cgi
• https://code.google.com/p/chromium/issues/list：

  これはあなたのJSFiddle、ここで一緒に、報告されるべきです。