Comment faire: travail d'état actif dans IE?

Question

J'ai un bouton dans mon formulaire html et j'ai besoin de changer son image d'arrière-plan quand on clique avec css. il fonctionne parfaitement en FF mais il semble que IE ne supporte pas l'état :active.

Voici mon code:

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

Ceci est un bug connu dans les versions antérieures d'Internet Explorer (je pense qu'ils ont résolu dans IE8) . J'ai l'habitude de résoudre ceci (ainsi que le problème "hover" correspondant) avec javascript. J'attache deux gestionnaires d'événements à l'élément - "mousedown" pour définir une classe supplémentaire (quelque chose comme "button-active") et "mouseup" pour supprimer la classe. En jQuery ce serait quelque chose comme ceci:

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

Ensuite, il suffit d'ajouter cette classe à la règle css, comme ceci:

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

Un peu laid, oui, mais qu'est-ce que vous attendez - C'est Internet Explorer. Ça ne peut pas être joli.