输入类型=“图像”在 Chrome 中显示不需要的边框，在 IE7 中显示损坏的链接

Question

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

我尝试了一切

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

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

有什么建议吗？ 链接此处

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 规则等原因，您可以保持代码不变并为按钮添加不可见的图像，我选择了：

这意味着它是完全透明的图像，大小似乎并不重要，但我选择了 1 px x 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;
}