Webサイト運営ブログ

IE6などのIEシリーズでfloat:right;などを使うとでてくる謎の空白をなくす方法。
最近忘れっぽいので、メモ代わりに記述。

たとえば、

— CSS —

.contents{clear:both;}
.text{width:500px;float:left;}
.menu{width:200px;float:right;}


— HTML —

<div class="contents">
<div class="text">
ここに本文
</div>
<div class="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>
</div>
</div>


となっている場合、IE６などで表示すると、下の画像のように.menu上に謎の空白ができてしまいますよね。

そこで、スタイルシートに以下の記述を追加する。

— CSS —

.contents{clear:both;line-height:0;}
.text{width:500px;float:right;line-height:normal;}
.menu{width:200px;float:right;line-height:normal;}


floatを利用しているdivを囲ってる.contentsにline-height:0;を指定し、floatを使ってるdivにはline-height:normal;を指定します。

すると、あら不思議、.menu上部にあった空白がなくなりました。

参考サイト：IE 6で泣かないための、9つのCSSハック