IE6でのfloat解除方法

zoom:1を再確認

floatの解除といえばclearfixが有名ですが、疑似要素をサポートしてないIE6ではclearfixが使えません。

そこで代替として、floatを解除する性質のあるoverflow:hiddenが用いられますが、意外な落とし穴があります。

下図はヘッダー下にある２つのバナーがfloatしています。

ところが、これをIE6で閲覧するとこのような表示になってしまいます。

バナー下の余白が消えてしまっています。

原因を究明するために、HTMLの構造とスタイルを紐解いてみましょう。

下記はメインカラムのソースです。

<div class="primary-section">
    <div class="primary-banner">Banner Lorem</div>
    <div class="primary-banner">Banner Lorem</div>
</div>
<div class="secondary-section">
    <p> Lorem ipsum dolor sit ... </p>
</div>

.primary-section{
    overflow: hidden;
}
   .primary-banner{
       float:left;
   }
.secondary-section{
    margin-top: 30px;
}

overflow:hiddenを指定してあるため、floatは解除されています。

しかし後続する要素のmarginをうまくレンダリングできなくなってしまっています。

どうやら、子要素でfloatを指定してしまうと親要素のサイズをうまく把握できなくなってしまい、高さを失ったのと同じ状態になってしまいます。

今回の例では、.primary-sectionはサイズを持たないため、staticに配置されている画像ボタンの位置まで.secondary-sectionが上がってきてしまっています。

最も簡単な方法はheightを指定してあげればよいのですが、高さが可変な要素ではいちいちheightを指定していると非効率です。

こんなときは、floatの解除と同時に、サイズに関わるレイアウト情報を与えてあげなければいけません。

そこでIE対応の強い味方、レイアウト情報を与えるzoom:1を指定します。

.primary-section{
    overflow: hidden;
    zoom: 1;
}

zoomプロパティとは

初期値はzoom:nomalです。

IE独自の仕様らしく、ブラウザの倍率を指定するプロパティです。

これに任意の値を与えると、hasLayoutというプロパティがtrueになり、width/heightを指定したときと同様の結果が得られます。

width/heightの値を決め打ちしたときもhasLayoutがtrueになりますが、zoom:1を指定すれば倍率を算出するため、たとえサイズを決め打ちしなくてもブラウザが自動でサイズ情報を取得しにいってくれるようです。

IE6/7のみ表示に崩れが生じていて、原因が思い浮かばない時はzoomプロパティを疑ってみてください。

しばしば共通CSSなどで、IE6に対応したclearfixとしてzoom:1が指定されていますが、このような理由だったのですね。

※ちなみにリスト要素にzoom:1を指定するとリストマーカーが消えるので、リスト要素には初期値であるzoom:normalを指定してください。