Прозрачный PNG имеет серую рамку в Chrome и IE, невидим в FireFox

Почему PNG имеет серую рамку в Google Chrome и IE?

Кроме того, почему это не видно в FireFox?

скрипка

HTML

<html>
    <head>
        <title>Inline Border</title>
        <style type="text/css" media="screen">
            .inline-image {
                width: 16px;
                height: 16px;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) 0px 0px no-repeat no-repeat;
            }
        </style>
    </head>
    <body>
        <img class="inline-image" />
    </body>
</html>
Источник

3 ответа

Решение

Если вы хотите использовать background-image, вы должны использовать тег div.

В противном случае, если вы хотите использовать тег img в этой ситуации, вы должны добавить атрибут src с прозрачным изображением.

Источник

Проверьте это jsfiddle: http://fiddle.jshell.net/Nr5tb/7/ Я надеюсь, что вы получили ответ от этого.

У вас есть элемент img, у которого нет атрибута src, но к нему применен стиль фонового изображения. Я бы сказал, что серая рамка является "заполнителем" для того места, где должно быть изображение, если бы вы указали атрибут src. Если вам не нужно изображение "переднего плана", не используйте тег img, как я упоминал в моем jsfiddle

Источник

Вам нужно добавить еще один стиль в CSS

.inline-image {

    display: block;
            }

или вам нужно изменить <img> тег к <div>

Источник
Другие вопросы по тегам