株式会社プロボ西嶋彰のブログ

2007/02/08

リストタグの中に画像入れたけど下に隙間ができちゃったときの対処(IE6)

リストタグに画像を入れてナビゲーションバーにすることもあると思います。
※Daniel Nolan氏のImage Rollover Codeなどを利用する場合。
しかし、IE6では、画像の下に隙間が出来ちゃいます。
これは、確か画像がインライン要素で、行間をもってるからだったような・・・。
そんなときは、隙間ができちゃう画像にdisplay: block;するといいみたいです。
簡単な例は、下記の通りです。

■HTML
<ul>
  <li><a href=”#”><img src=”hoge.gif” alt=”fuga” class=”imgover” /></a></li>
  <li><a href=”#”><img src=”hoge.gif” alt=”fuga” class=”imgover” /></a></li>
  <li><a href=”#”><img src=”hoge.gif” alt=”fuga” class=”imgover” /></a></li>
</ul>
■CSS
ul {
  width: xxxpx;
  height: xxxpx;
}

li {
  float: left;
}

li img {
  display: block;
} 

0 コメント:

Archive

About Me