5

複数のアンカー要素があります。たまにクリックしても何も起こらず、すべての CSS アニメーションが機能しますが、リンクがページを開いたり、アクションをトリガーしたりしません。カーソルを少し動かしてから、もう一度クリックする必要があります。

CSSの問題だと確信していますが、CSSに問題はありません。問題は余白にある可能性があると思います（下余白は 4 ピクセルですが、:active の上余白は 4 ピクセルです）が、多くの Web サイトでこれを見て、ボタンは問題なく機能していました...

ここにボタンがあります。それらをクリックすると、約 20 回のクリックのうちの 1 回が機能しません (ただし、最初のクリックで発生する場合もあります)。

http://jsfiddle.net/4nz4v/ (最新の Opera と Chrome の両方でテストして、クリック後にボタンが .active クラスを取得していないことに注意してください)

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

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

4

3 に答える 3

0

解決策を見つけました:の代わりにmouseuporを使用します:mousedownclick

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

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

于 2013-04-04T20:37:21.003 に答える
0

これはバグです。非常に一貫性があります。クリックできない行を見つけるだけです。JSFiddle を再度確認し、テキストの 2 ピクセルまたは 3 ピクセル下の行を見つけます。それはあなたがそれをクリックすることができないところです - まったく。見つからない場合は、カーソルをボタンの下から上にゆっくりと 1 ピクセルずつ移動し、各ピクセルをクリックします。

クリックできない領域は水平方向に一貫しています。ピクセル行全体をクリックできません。上部と下部の両方のパディングが変更されている場合、ボタンごとに最大 2 つのクリックできないピクセル行が見つかりました。

ボタンまたはリンクのパディング/マージン/ボーダーが状態で変更されると、バグが発生するよう:activeです。

これは、JSFiddle とともに次の場所に報告する必要があります。

于 2014-01-08T10:13:02.287 に答える