如何摆脱 <img> 标签中的默认轮廓？ [复制]答案

【问题标题】：How do I get rid of the default outline in the <img> tag? [duplicate]如何摆脱 <img> 标签中的默认轮廓？ [复制]
【发布时间】：2014-05-08 03:22:59
【问题描述】：

<img class="image_cover" src = "" />

.image_cover {
    width:25px;
    height:25px;
    border-style:none;
    border: 0;
    box-shadow:none;
}

我在这里演示一下：jsfiddle

在 Chrome 版本 33.0.1750.152 中，我看到 <img> 标记上方有一个框（边框）。我正在努力摆脱它。

我按照这里的输入：Removing the image border in Chrome/IE9，并设置了border、border-style 和box-shadow 属性，但我仍然看到它周围的边框。

我该如何解决这个问题？

【问题讨论】：

标签： html css

【解决方案1】：

Chrome 会自动为具有空 src 属性的 img 标签呈现边框。

一种解决方法是在此图像标签中放置一个透明的 png 或 gif。

【讨论】：

【解决方案2】：

消除轮廓是通过使其透明来完成的。

img{    
    border-color:transparent;
}

【讨论】：

【解决方案3】：

就像其他人提到的那样，边界在那里是因为 SRC 是空的。如果 src 不为空，您可以使用 border:none 更改边框。然而，这是因为 <img> 标签上没有 src 的默认浏览器行为，这就是 border:none 无效的原因。

如果出于某种原因你想要一个空的 src，你可以这样做.. 但我不确定你为什么想要一个没有 src 的图像标签

<img class="image_cover" src="" />

.image_cover {
    width:25px;
    height:25px;
    content: "";
}

演示：

http://jsfiddle.net/krishollenbeck/H4TNw/8/

【讨论】：

【解决方案4】：

显示大纲是因为您没有将 src 属性设置为有效的图像 url。

【讨论】：

【解决方案5】：

这是因为您没有指定来源。指定 SRC 后，这应该不再是问题。

【讨论】：

【解决方案6】：

CSS

img {
    Border: none;
}

试试这个，它应该会删除所有默认边框

【讨论】：