クリックしたときにボタン画像が少し上に移動します（Internet Explorerで）

Question

クリックしている間に画像が動きにくい理由を誰かが知っていますか？これが私たちのボタンです：

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

これはクラスです：

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

Answer 1

ボタンのタグが常に正しくクロスブラウザのスタイルを取得するために面倒です。 onClickにjavascriptを使用している限り、buttonタグを使用する本当の理由はありません。アンカータグを使用して、すべての状態をターゲットにして、画像の位置を設定してみてください。

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