形式提交按钮移动切割图像

我有一个提交按钮，使用下面的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.

来源

2009-11-11 flavour404

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

<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" />

来源

2009-11-11 22:34:46 thismat

我敢肯定，这说明了错误，并有一些对你的解决方案：

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

来源

2009-11-11 22:47:37 Bertine

我有我的按钮走动，他们点击后，在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浏览器中为我工作的。

来源

2013-03-07 10:20:38

形式提交按钮移动切割图像

回答

相关问题