L'image du bouton se déplace légèrement lorsqu'on clique dessus (dans Internet Explorer)

Question

Est-ce que quelqu'un sait pourquoi une image peut bouger/bouger légèrement en étant cliqué (seulement dans IE)? Ceci est notre bouton:

<button class="join" name="register" value="" onClick="window.location = 'location'" tabindex="4"></button> 

Ceci est la classe:

button.join { 
     background: url(../images/join.png); 
     border: 0; 
     height: 56px; 
     width: 178px; 
     cursor: pointer; 
     } 

Answer 1

balises Button sont toujours embêtant pour obtenir de style correctement cross-browser. Tant que vous utilisez javascript pour onClick, il n'y a pas de raison valable d'utiliser le bouton. Essayez d'utiliser une balise d'ancrage, en ciblant tous les états et en définissant la position de l'image.

<a class="join" href="#" id="register" onClick="window.location = 'location'" tabindex="4">Button</a> 

a.join:link, 
a.join:visited 
a.join:hover, 
a.join:active 
{ 
     background: url(../images/join.png) 0 0 no-repeat; 
     border: 0; 
     text-indent: -999em; /* Optional - To remove the HTML text from the button */ 
     height: 56px; 
     width: 178px; 
     cursor: pointer; 
}