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中为我工作的。

Answer 2

尝试使用按钮标记替换输入。

<button type="submit"><img src="..." alt="..." /></button>

并查看是否无法完成此操作。您需要调整悬停效果，但可能需要将文本放在按钮内并使用负文本缩进或javascript悬停事件来更改引用的图像。

另一种选择是使用javascript在普通链接上调用表单提交，因为按钮通常具有点击动画。

只需注意，您可以通过添加背景位置获得更一致的结果，所有这些都可以缩写

   .subm:hover
   {
     background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
   }

另一种可能更理想的选择，使用输入类型图像而不是提交。

<input type="image" src="..." Value="Submit" />

Answer 3

我很确定这会描述错误并为您提供一些解决方案：

Fixing the IE8 Form Button with Background Image On Click CSS Bug

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

3 个答案: