IMG 标签上的奇怪边框答案

【问题标题】：Strange border on IMG tagIMG 标签上的奇怪边框
【发布时间】：2023-03-04 04:23:01
【问题描述】：

HTML：

<html>
<body>

<header>
    <img class="logo" />
</header>

</body>
</html>

CSS：

* {
    margin:0px;
    padding:0px;
    border:none;
}

img.logo {
    width:126px;
    height:50px;
    background-image:url('images/logo.png');
}

每次我尝试设置这样的 IMG 样式时，都会出现一个奇怪的边框。即使我会放置边框：0px;或边框：无；在 img.logo css 中，边框仍然存在。

【问题讨论】：

<img> 标签需要src。
这不是有效的 html。 src 和 alt 是 required attributes for the image tag
这非常感谢。我使用 IMG 标签的原因是因为我发现它是图像最合乎逻辑的标签，它不需要关闭标签。
IMG 仍然是显示是内容而不是装饰（也称为演示）的图像的最合乎逻辑的标签。如果您的文档在没有图像的情况下仍然有意义，则首选 CSS。除了背景之外，您可能还想使用image replacement technique 或仅在 IMG 标记中使用徽标的透明 .png。

【解决方案1】：

这是默认的“特殊”边框，当您使用 img 元素并将 src 属性设置为不存在的东西（或根本没有 src）时出现。

一种常见的解决方法是将src 设置为blank.gif file：

<img class="logo" src="blank.gif" />

我必须指出（在这种情况下）将<img> 与background-image 一起使用是没有意义的。只需设置src 属性，忘记background-image。

【讨论】：

我从来没有听说过这个并且无法重现它。您能否提供参考，或者这个浏览器是特定的？
不同的浏览器对此的行为确实不同。在 Chrome 或 IE8 中查看此内容，例如：jsfiddle.net/6LtfP 令人恼火的是，我链接到的 blank.gif 似乎并不透明。我必须找到另一个版本。
哇，这很有趣，谢谢分享。我知道 FF 需要 -moz-force-broken-image-icon 来获取图标，但我从未见过在其他浏览器中使用空白 src VS 不存在的 src VS 没有 src 属性会如何影响它。 IE 有两个我从未见过的图标，Chrome 没有在没有 src attr 的那个上显示边框。非常有趣，谢谢。

【解决方案2】：

如果您不打算在任何地方使用src 属性，您可以简单地使用div 而不是img 作为背景图像。

<div class="logo"> </div>

否则需要src。

【讨论】：

【解决方案3】：

<img class="logo"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

【讨论】：

【解决方案4】：

这对我有用

img {
  text-indent: -999px;
}

【讨论】：

【解决方案5】：

我有同样的问题，但现在边框没有出现。

解决方案：

在 HTML 的 img 标签中添加以下内容

【讨论】：