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

问题描述

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

我什么都试过了

border:0;边界:无；大纲:无；

没有任何运气...有趣的是 IE7 中的断开链接图标与我的图像重叠.

有什么建议吗?此处链接

HTML(由 WordPress 生成)

<div><input id="s" name="s" type="text" value="" size="32" tabindex="1"/><input id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>

</表单>

CSS

input#s{位置:相对；宽度:245px；高度:28px；边界:0;垂直对齐:底部；背景:url(图像/输入搜索-bkg.png)0 0 不重复；}#searchsubmit {显示:内联块；背景:url(图像/提交-bkg.png)0 0 不重复；宽度:30px；高度:30px；边界:0;垂直对齐:底部；}

Firefox 和 Opera 渲染图像按钮正常，但在 Chrome 和 Safari 中，我在它周围看到了灰色边框.IE 7 和 8 在我的图像上添加了一个符号(破碎的图标?)...我很困惑.

解决方案

您正在使用图像作为背景.为什么不把它设置为按钮的 src 属性?

当您将 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

I have not found a solution yet...

I tried everything

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

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

Any suggestion? link here

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 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.

解决方案

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"/>

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

Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-src and http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

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