1

Google Chrome と IE で PNG にグレーの境界線があるのはなぜですか?

また、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

background-imageを使用する場合は、divタグを使用する必要があります。

それ以外の場合、この状況でimgタグを使用する場合は、透明な画像を使用してsrc属性を追加する必要があります。

于 2012-09-13T14:11:49.903 に答える
2

この jsfiddle を確認してください: http://fiddle.jshell.net/Nr5tb/7/ .これから答えを得られることを願っています。

src 属性を持たない img 要素がありますが、background-image スタイルが適用されています。src 属性を指定した場合、灰色の境界線は画像が配置される場所の「プレースホルダー」であると言えます。「前景」画像が必要ない場合は、jsfiddle で言及しているように、img タグを使用しないでください。

于 2012-09-13T13:23:19.927 に答える
-1

CSSにもう1つスタイルを追加する必要があります

.inline-image {

    display: block;
            }

<img>または、タグを次のように変更する必要があります<div>

于 2012-09-13T13:19:37.290 に答える