css – input type =“image”在Chrome中显示不必要的边框,IE7中的链接断开

前端之家收集整理的这篇文章主要介绍了css – input type =“image”在Chrome中显示不必要的边框,IE7中的链接断开前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我还没有找到解决方

我试过一切

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在我的图像上添加一个符号(破坏的图标?)…我很难过.

解决方法

您正在使用图像作为背景.为什么不将其设置为按钮的src属性
<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

当您将类型设置为图像时,输入还需要一个src属性.

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

猜你在找的CSS相关文章