点击时按钮图像稍微向上移动（在Internet Explorer中）

Question

有人知道图片点击时可能会轻微移动/跳跃（只发生在IE中）吗？这是我们的按钮：

<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，没有真正的理由使用按钮标签。尝试使用锚标签，定位所有状态并设置图像的位置。

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