IMG标签上的奇怪边框

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元素时,它会显示默认的"特殊"边框.srcsrc

一个常见的解决方法是设置src一个blank.gif文件:

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

我必须指出它(在这种情况下)使用<img>with 是没有意义的background-image.只需设置src属性即可忘记background-image.

Answer 2

如果你不打算在任何地方使用属性,你可以简单地使用div而不是img用于背景图像src.

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

否则src是必需的.