我有一个提交按钮并使用以下 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。
最佳答案
当我在 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 中对我有用。
关于html - 表单提交按钮移动切割图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1718462/