Question

我还没有找到解决方案......

我尝试了一切

border:0;
border:none;
outline:none;

没有任何运气......有趣的是IE7中的链接图标与我的图像重叠。

有什么建议吗？ link here

HTML（由WordPress生成）

<form id="searchform" method="get" action="http://eezzyweb.com/">
   <div>
  <input id="s" name="s" type="text" value="" size="32" tabindex="1"/>
  <input id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>
   </div>
</form>

CSS

input#s{
position:relative;
width:245px;
height:28px;
border:0;
vertical-align:bottom;
background:url(images/input-search-bkg.png) 0 0 no-repeat;
}

#searchsubmit {
display:inline-block;
background:url(images/submit-bkg.png) 0 0 no-repeat;
width:30px;
height:30px;
border:0;
vertical-align:bottom;
}

Firefox和Opera渲染图像按钮确定，但在Chrome和Safari中我得到了它周围的灰色边框。 IE 7和8在我的图像上添加一个符号（破碎的图标？）......我感到很困惑。

Answer 1

您正在使用图片作为背景。为什么不将它设置为按钮的src属性？

<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

当您将type设置为image时，输入也需要src属性..

参考：http://www.w3.org/TR/html401/interact/forms.html#adef-src和http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

Answer 2

作为参考，如果您想坚持使用CSS为按钮添加图像，出于提供：hover或：active规则等原因，您可以保持代码不变并将按钮添加为不可见的图像，我跟着去了：

<input type='image' src='invisible.png'/>

这意味着它是一个完全透明的图像，尺寸看起来并不重要，但我用1像素乘以1px。

Answer 3

这对我有用：

input[type="image"]:focus {
    outline: none;
}

Answer 4

Chrome，IE和Safari愚蠢地解析代码。

<input type="image" src="bleh.png">
<input type="image" src="bleh.gif">

这些浏览器

的解析方式与

相同

<input type="image" src="bleh.png"><input type="image" src="bleh.gif">

将所有图像输入放在编码文档中的同一物理行上。我刚刚在我的显示器上用同样的问题打了一个整体，直到我意识到这一点。

Answer 5

这很难看，但它有效......

<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />

Answer 6

试试这个

a:active {
 outline: none;
}
a:focus {
 -moz-outline-style: none;
}
a, input {
 outline-color: invert;
 outline-style: none;
 outline-width: medium;
}

input type =“image”在Chrome中显示不需要的边框，在IE7中显示断开的链接

6 个答案: