web-dev-qa-db-ja.com

IMGタグの奇妙な境界線

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をスタイルしようとするたびに、奇妙な境界線が表示されます。 border：0px;を配置しても、またはボーダー：なし; img.logo cssには境界線が残ります。

htmlcssborderimage
35
Mark

これは、img属性を、存在しないもの（またはsrcなし）に設定してsrc要素を使用すると表示されるデフォルトの「特別な」境界線です。 。

一般的な回避策は、srcを blank.gifファイル に設定することです：

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

（この場合）<img>をbackground-imageと共に使用しても意味がないことを指摘する必要があります。 src属性を設定し、background-imageを忘れてください。

65
thirtydot

div属性をどこにも使用しない場合は、背景画像にimgの代わりにsrcを使用できます。

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

それ以外の場合は、srcが必要です。

9
ALi Aryan

これは私のために働く

img {
  text-indent: -999px;
}
2
Kirubel

@ thirtydotのこの質問に対する回答 と @ Laykeの回答（透明な画像で可能な最小のデータURI画像） を組み合わせると、次のオールインワンソリューションになります。

<img class="logo"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
0
Briguy37