「clearfix」のIE 7対策：その２

Post on:2006年12月21日

「clearfix」のIE5.5～IE7対応版

「.clearfix」に「zoom:1;」を指定します。

.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ zoom:1; }

1
2
3
4
5
6
7
8
9
10
11

.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 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.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の値を切り替えるスクリプトを使用していると手間が増える。