Странная граница для тега IMG

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 граница остается.

Ответ 1

Это стандартная специальная граница, которая появляется, когда вы используете элемент img с атрибутом src, установленным для чего-то, чего не существует (или вообще нет src).

Общим решением является установка src в файл blank.gif:

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

Я должен указать, что он (в данном случае) не имеет смысла использовать <img> с background-image. Просто установите атрибут src и забудьте о background-image.

Ответ 2

Вы можете просто использовать div вместо img для фонового изображения, если вы не собираетесь использовать атрибут src где угодно.

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

в противном случае src требуется.

Ответ 3

Это работает для меня

img {
  text-indent: -999px;
}