1

为什么 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>
4

3 回答 3

2

检查这个jsfiddle：http ://fiddle.jshell.net/Nr5tb/7/ 。我希望你能从中得到答案。

您有一个没有 src 属性的 img 元素，但它确实应用了背景图像样式。如果您指定了 src 属性，我会说灰色边框是图像所在位置的“占位符”。如果您不想要“前景”图像，请不要使用我在 jsfiddle 中提到的 img 标签

于 2012-09-13T13:23:19.927 回答
2

如果你想使用背景图片，你应该使用 div 标签。

否则，如果你想在这种情况下使用 img 标签，你应该添加带有透明图像的 src 属性。

于 2012-09-13T14:11:49.903 回答
-1

您需要在 css 中再添加一种样式

.inline-image {

    display: block;
            }

或者您需要将<img>标签更改为<div>

于 2012-09-13T13:19:37.290 回答