输入类型=“图像”在Chrome中显示不需要的边框，并在IE7中断开链接 [英] input type="image" shows unwanted border in Chrome and broken link in IE7

问题描述

我尚未找到解决方案...

I have not found a solution yet...

我尝试了一切

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

没有任何运气...有趣的事情是在IE7中断的链接图标， 。

without any luck...and the funny thing is the broken link icon in IE7 which overlaps my image.

有任何建议吗？
点击此处

HTML（由WordPress生成）

HTML (generated by 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在我的图片上添加一个符号（破碎的图标？）。我很困惑。

Firefox and Opera render the image button ok, but in Chrome and Safari I get that grey border around it. IE 7 and 8 add a symbol (broken icon?) over my image... I am baffled.

推荐答案

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

You are using the image as a background. Why not set it as the src property of the button ?

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

当您将类型设置为 image 输入还需要一个 src 属性。

When you set the type as image the input expects an src attribute as well..

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

这篇关于输入类型=“图像”在Chrome中显示不需要的边框，并在IE7中断开链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！