CSS input type="image" 在 Chrome 中显示不需要的边框，在 IE7 中显示断开的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4108983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input type="image" shows unwanted border in Chrome and broken link in IE7
提问by Mirko
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.
没有任何运气...有趣的是 IE7 中的断开链接图标与我的图像重叠。
Any suggestion? link here
有什么建议吗？ 链接在这里
HTML (generated by WordPress)
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
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.
Firefox 和 Opera 渲染图像按钮正常，但在 Chrome 和 Safari 中，我在它周围看到了灰色边框。IE 7 和 8 在我的图像上添加了一个符号（破碎的图标？）...我很困惑。
回答by Gabriele Petrioli
You are using the image as a background. Why not set it as the src property of the button ?
您正在使用图像作为背景。为什么不将其设置为按钮的 src 属性？
<input src="images/submit-bkg.png" id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/>
When you set the typeas imagethe input expects an srcattribute as well..
当您将 设置type为image输入时，还需要一个src属性。
Reference: http://www.w3.org/TR/html401/interact/forms.html#adef-srcand http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1
参考：http: //www.w3.org/TR/html401/interact/forms.html#adef-src和http://www.w3.org/TR/html401/interact/forms.html#h-17.4。 1
回答by Guillermo Siliceo Trueba
For reference, if you want to stick to using CSS to give the button an image, for reasons such as providing a :hover or an :active rule, you can keep your code as is and add the button an invisible image, i went with:
作为参考，如果您想坚持使用 CSS 为按钮提供图像，例如提供 :hover 或 :active 规则等原因，您可以保持代码不变，并为按钮添加一个不可见的图像，我选择了：
<input type='image' src='invisible.png'/>
<input type='image' src='invisible.png'/>
Which means its a completly transparent image, size doesnt seem to matter, but i went with 1 px by 1px.
这意味着它是一个完全透明的图像，大小似乎无关紧要，但我选择了 1 像素 x 1 像素。
回答by Jason Silver
This worked for me:
这对我有用：
input[type="image"]:focus {
outline: none;
}
回答by Sean
Chrome, IE, and Safari parse the code foolishly.
Chrome、IE 和 Safari 愚蠢地解析代码。
<input type="image" src="bleh.png">
<input type="image" src="bleh.gif">
is not parsed the same by these browsers as
这些浏览器的解析方式与
<input type="image" src="bleh.png"><input type="image" src="bleh.gif">
Put all of your image inputs on the same physical line in the coded document. I just about punched a whole through my monitor with the same problem until I realized this.
将所有图像输入放在编码文档中的同一条物理线上。在我意识到这一点之前，我几乎用同样的问题在我的显示器上打了一个整体。
回答by Dave Abad
This is ugly but it works...
这很丑陋，但它有效......
<input id="saveForm" style="border:0px;" type="image" name="submit" value="Submit" BORDER="0" src="./images/button_submit.png" />
回答by K360
Try this
尝试这个
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
a, input {
outline-color: invert;
outline-style: none;
outline-width: medium;
}
