IE6でclearfixのためにoverflow:hidden指定するときの注意事項

この記事は約 2 分で読めます。

大丈夫、あなたなら出来る！　
ソーシャル・マーケティング協会 代表理事の白鳥友康です。

要素をfloatしたときに、その親要素に overflow:hidden; を設定することは良くあると思います。その際は、InternetExplorer 6（IE6）の時だけ注意が必要。

overflow:hidden; を設定した要素の hasLayout が On になっていないと clearfix の効果がありません。こんなときは IEバグの魔法の呪文 zoom:1; を指定しましょう。

★HTML

<div class="box">
 <img src="img/photo.jpg" class="photo" alt="" />
  <p>dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. dummy text. </p>
<!-- /[.box] --></div>

★CSS

.box {
  overflow:hidden;
    zoom:1; /* for ie6 */
}
.box .photo {
 float:left;
 width:100px;
    margin:0 10px 10px 0;
}

◯clearfixでfloatを解除 | d-spica
http://blog.d-spica.com/entry/070307clearfix.html

カテゴリ - ◆ウェブサイト・ホームページ制作, ウェブデザイン
タグ - CSS

無料プレゼント