Странная граница на теге IMG - PullRequest
32 голосов
/ 21 апреля 2011

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

Ответы [ 3 ]

62 голосов
/ 21 апреля 2011

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

Обычный обходной путь - установить src в файл blank.gif :

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

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

9 голосов
/ 26 марта 2016

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

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

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

2 голосов
/ 16 мая 2017

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

img {
  text-indent: -999px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...