html - 表单提交按钮移动切割图像

Question

我有一个提交按钮并使用以下 css 对其进行样式设置:

.subm
{    
background-color:Transparent;
background-image:url(Images/Button_Send.png); 
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}

   .subm:hover
{
    background-color:Transparent;
    background-image:url(Images/Button_Send_Over.png); 
    background-repeat:no-repeat;
    width:82px;
    height:30px;
    display:block;
  border:none;
    outline:none;
    overflow:visible;
}

这是 html:

<input type="submit" class="subm" value="" />

没什么奇怪的。然而，令我恼火的是，当在 IE 中单击提交按钮时，它会将图像向上移动几个像素并切断它们，这使得它看起来，嗯，好词，'naff'。我该如何补偿或阻止这种情况？

我已经尝试扩展图像并在顶部留下几个空白像素，但它仍然做同样的事情!

谢谢 R。

Answer 1

当我在 IE 中点击它们时，我也遇到了按钮移动的问题。我找到的解决方案是:

1.) 给你的按钮一个相等的边距2.) 将按钮放在您可以根据自己的喜好放置的包装部分

.subm {    
   background-color:Transparent;
   background-image:url(Images/Button_Send.png); 
   background-repeat:no-repeat;
   width:82px;
   height:30px;
   display:block;
   border:none;
   outline:none;
   overflow:visible;
   margin:10px; //maybe more maybe less
}

<div style="position:...;float:...;">
  <input type="submit" class="subm" name="myButton" id="myButton" />
</div>

虽然我必须提到，在我的特定情况下，我通过 ID 设置按钮的样式而不是应用类，因此您可能会遇到使用 .subm 类的多个按钮的问题。这在 IE 中对我有用。