CSS: i pulsanti sono di volta in volta non modificabili?

Question

Ho più elementi di ancoraggio. Di tanto in tanto, fare clic su di essi non fa nulla, tutte le animazioni CSS funzionano ma i collegamenti non aprono alcuna pagina/attivano alcuna azione. Devo spostare un po 'il cursore e quindi fare nuovamente clic.

Sono sicuro che si tratta di un problema CSS, ma non riesco a trovare nulla di sbagliato nel mio CSS. Penso che il problema potrebbe essere nei margini (margine inferiore 4px BUT 4px margine superiore su: attivo) ma ho visto questo su molti siti Web e i pulsanti funzionavano bene ...

Ecco i pulsanti. Fare clic su di essi, circa uno su 20 clic non funziona (a volte accade con il primo clic):

http://jsfiddle.net/4nz4v/ (notare come i pulsanti non ricevono la classe .active dopo i clic, testati sia in Opera che in Chrome)

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

Grazie.

Answer 1

Come sospettate, sembra che si tratti di un problema di margine.

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

La rimozione del codice precedente risolve il problema. Vorrei rimuovere questo codice e aggiungere padding al suo genitore per risultati più coerenti.

Answer 2

trovato una soluzione: utilizzare mouseup o mousedown invece di click:

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

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

Answer 3

Questo è un bug. È molto coerente: devi solo trovare la riga che è invalicabile. Controlla di nuovo il tuo JSFiddle e trova la riga 2 o 3 pixel sotto il testo. È lì che non puoi cliccarlo - a tutti. Se non riesci a trovarlo, sposta il cursore dalla parte inferiore del pulsante verso l'alto, lentamente, un pixel alla volta, facendo clic su ciascun pixel.

L'area sbloccabile è coerente in orizzontale; l'intera riga di pixel è invalicabile. Ho trovato al massimo due righe di pixel non modificabili per pulsante, se è stata modificata sia la parte superiore che quella inferiore.

Il bug sembra verificarsi quando il padding/margine/bordo del pulsante o del collegamento viene modificato nello stato :active.

Questo dovrà essere segnalata, insieme al tuo JSFiddle, qui:

• https://bugs.webkit.org/enter_bug.cgi
• https://code.google.com/p/chromium/issues/list -> 'Nuovo numero'.