IE7,8にも対応するclearfix

 今更ながらの clearfix ネタ。構造に大きく手を加えずに float を clear させるためのいわゆる clearfix というテクニックですが、色々とバリエーションが派生してしまったせいか、いまだに Internet Explorer 7(IE7)に未対応なままのソースも良くみかけます。

 先日、Internet Explorer 8(IE8)ベータ版での動作検証を行う機会があったので、その際確認のとれたIE7,8にも対応する clearfix をば。

/* for modern brouser */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */

 display が inline-block なのがミソですね。

この記事へのコメント

この記事へのコメントを書く

お名前: [必須入力]

メールアドレス:

コメント: [必須入力]  ※URLは入力できません(スパム・コメント防止の為)