フロートした要素がはみ出してしまうのを回避する「clearfix」のIE 7対応版として、「min-height:1%」の紹介をしましたが、今回はほかの対応方法の紹介です。
IE5を対応ブラウザにするかしなかで、分けてみました。
「clearfix」のIE5.5～IE7対応版
- 「.clearfix」に「zoom:1;」を指定します。
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1;
}
「clearfix」のIE5～IE7対応版
- 「overflow:hidden;」を指定し、IE5用に「height:1%;」を指定します。
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
overflow:hidden;
}
/* Hides from IE-mac \*/
* html .clearfix{
height:1%;
overflow:visible;
}
/* End hide from IE-mac */
clearFixの注意点
- contentにピリオドの指定をしないと、Netscape 7で要素が非表示になる→「height:1px;」で解決するがレイアウトが1pxずれてしまう。
- IE7用に「display:inline-block;」「display:inline-table;」を利用すると、FirefoxのJavaScriptコンソールでパースエラーがでてしまう（指定は無視される）。
- IE7用にdisplayを使用すると、displayの値を切り替えるスクリプトを使用していると手間が増える。
clearFixの紹介サイト（英語）
Clearing a float container without source markup（Position Is Everything）
Post on:2006年12月21日
