input type ="image"在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规则的原因,你可以保持你的代码不变,并添加一个不可见的图像按钮,我去了:

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

这意味着它是一个完全透明的图像,大小似乎并不重要,但我用1像素乘1px.

Answer 3

这对我有用:

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