一尘不染

输入类型=“图像”在Chrome中显示不需要的边框,在IE7中显示断开的链接

css

我还没有找到解决方案…

我尝试了一切

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在我的图像上添加了一个符号(破图标?)…我感到困惑。


阅读 198

收藏
2020-05-16

共1个答案

一尘不染

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

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

当您将设置typeimage输入时,也需要一个src属性。

2020-05-16