Search code examples
htmlpnginvisible

Transparent PNG has grey border in Chrome and IE, invisible in FireFox

why does the PNG have a grey border in Google Chrome and IE?

Also, why isn't it visible in FireFox?

Fiddle

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>
Solution

  • If you want to user background-image, you should use div tag.

    Otherwise, If you want to user img tag in this stituation, you should add src attribute with transparent image.