Question

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中，边界仍然存在。

Answer 1

当您使用img元素且src属性设置为不存在的内容（或根本没有src）时，会显示默认的“特殊”边框

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

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

我必须指出，使用<img>和background-image毫无意义（在这种情况下）。只需设置src属性，忘记background-image。

Answer 2

如果您不打算在任何地方使用div属性，则可以使用img代替src获取背景图片。

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

否则src是必需的。

Answer 3

这对我有用

img {
  text-indent: -999px;
}

Answer 4

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

Answer 5

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

解决方案：

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