ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：hana999999 リストタグに画像を入れた場合
困り度：
  • 困っています
 リストタグに画像<img>タグを入れたのですが、Firefoxでは隙間なく表示されますが、IE6で確認すると、画像の下に隙間ができてしまいます（3pxほど）。
何か修正点や、解決策があればお願い致します。
そもそも、リストタグに画像を入れることがおかしいのでしょうか？


【HTML】
<ul id="navi">
<li><img src="../img/aaa.gif" width="200" height="50"></li>
<li><img src="../img/bbb.gif" width="200" height="50"></li>
<li><img src="../img/ccc.gif" width="200" height="50"></li>
<li><img src="../img/ddd.gif" width="200" height="50"></li>
</ul>


【CSS】
ul#navi{
margin: 0px;
padding: 0px;
}
ul#navi li{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-position: outside;
display: block;
width: 200px;
height: 50px;
}
質問投稿日時：08/03/25 16:46
質問番号：3893669
最新から表示｜回答順に表示

回答

 
回答者：taloo ul#navi li img{
border:0;
margin:0;
padding:0;
}
または
ul#navi li img{
vertical-align: bottom;
}
もしくはその両方。
たぶん。

font-sizeとline-heightは<img>ではなくテキストを併用したときや、
ネットワークエラーなどで画像が読めずにalt属性が展開されたときに弊害が出るかもです。
（Firefoxはalt属性が展開されると、<img>のwidth属性などが無視され、<span>と同じ扱いになります）
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/26 04:16
回答番号：No.2
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼vertical-align: bottom;
で解決できました。
border:0;
margin:0;
padding:0;
と併用して使用した方が良さそうなので、併用して使用させていただきます。
ありがとうございました。

回答

 
回答者：tenderfeel ul#navi liに以下追加してみてください。
font-size:0;
line-height:0;
種類：回答
どんな人：経験者
自信：自信あり
回答日時：08/03/25 17:27
回答番号：No.1
この回答への補足この回答に補足をつける(質問者のみ)
この回答へのお礼こちらで解決できました。
テキスト分の余白ができていたんでしょうか。

ありがとうございました。
 
最新から表示｜回答順に表示
このページのトップへ