镀铬边框问题答案

【问题标题】：chrome border issue镀铬边框问题
【发布时间】：2012-05-11 06:45:16
【问题描述】：

我只在 chrome 中遇到这个问题。如何去除图像周围的边框？请看 chrome 中的小提琴。

<form>
    <input type="image" class="searchbox_submit search_btn" value="">
</form>

form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
    outline: none;
}

.search_btn {
    background: url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -200px transparent;
    height: 25px;
    width: 30px;
    outline: none;
    border: none;
    outline-width: 0;
    -webkit-appearance: none; 
}

演示： http://jsfiddle.net/TXYg6/

【问题讨论】：

旁注：你的图片偏心，应该是宽：30px，高：30px，url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -192px
将类型从图片更改为提交
input type="image" shows unwanted border in Chrome and broken link in IE7的可能重复

标签： css google-chrome border

【解决方案1】：

你正在使用<input type="image" />，所以a src attribute is expected。您还没有指定一个，所以 Chrome 显示一个灰色边框，与没有 src 属性的 it does for an img 相同。

如果您想坚持使用<input type="image" /> 并使用 CSS 精灵，则必须将 something 指定为 src，例如 1x1 透明的“blank.gif” ”。

http://jsfiddle.net/thirtydot/TXYg6/14/

但是，这看起来很可怕。相反，我建议切换到<input type="submit" />，即solves the problem。

【讨论】：

或者另一种选择是只使用type="submit"，因为默认情况下type="image"也会提交表单。
@animuson - 我认为<button type="submit" /> 更好，因为您实际上没有与按钮关联的输入。
@Madbreaks：我认为<button> 上没有type 属性，按钮也不是自动关闭标签...此外，<input type="submit" /> 不是实际上是一个输入，除非你给它一个name。
@minitech：有，缺失值默认为submit。
@animuson：嗯。我需要多出去走走。

【解决方案2】：

用提交类型替换它

<input type="submit" class="searchbox_submit search_btn" value="">

更正你的 CSS 高度和宽度

【讨论】：

【解决方案3】：

使用data: URI 给它一个空白图像作为src。由于您只关心 Chrome，所以没有问题：

<input type="image" class="searchbox_submit search_btn" value="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=">

http://jsfiddle.net/TXYg6/23/

【讨论】：

【解决方案4】：

Chrome 为任何没有 src 的图像提供边框/轮廓，您可以将输入类型设置为“提交”，这将消失。

或者，使用带有 src 的 an 并由此触发提交，但您也可以只使用 type="submit"

unwanted chrome borders

【讨论】：

【解决方案5】：

你真的需要那个 att type="image" 吗？因为这就是导致问题的原因......

【讨论】：

【解决方案6】：

在语义上我会说使用button，因为您实际上没有关联的输入值，因此它不是输入：

<button type="submit" class="searchbox_submit search_btn"></button>

来自the docs：

使用 BUTTON 元素功能创建的按钮就像按钮一样使用 INPUT 元素创建，但它们提供更丰富的渲染可能性：BUTTON 元素可能有内容。例如，一个包含图像的 BUTTON 元素的功能类似于并且可能类似于类型设置为“图像”的 INPUT 元素，但 BUTTON 元素 type 允许内容。

干杯

【讨论】：