Come fare: lavoro stato attivo in IE?

Question

Ho un pulsante nel mio modulo html e ho bisogno di cambiare la sua immagine di sfondo quando si fa clic su css. funziona perfettamente in FF ma sembra che IE non supporti lo stato :active.

Ecco il mio codice:

HTML:

<button class='button'>Click Me</button> 

CSS:

.button { 
    width: 118px; 
    height: 33px; 
    background: url(/images/admin/btn.png) no-repeat center top; 
    border: none; 
    outline: none; 
} 
.button:active { 
    background-position: center bottom; 
} 

Answer 1

Questo è un bug noto nelle versioni precedenti di IE (penso hanno risolto in IE8) . Solitamente risolvo questo problema (così come il problema relativo al "passaggio del mouse") con javascript. Allego due gestori di eventi all'elemento - "Mousedown" per impostare una classe aggiuntiva (qualcosa come "button-active") e "mouseup" per rimuovere la classe. In jQuery sarebbe qualcosa di simile:

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

Poi, basta aggiungere che classe per la regola CSS, in questo modo:

.button:active, .button-active { 
    background-position: center bottom; 
} 

un po 'brutto, sì, ma cosa vi aspettate - è Internet Explorer. Non può essere carino.