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

フロートした要素がはみ出してしまうのを回避する「clearfix」のIE 7対応版として、「min-height:1%」の紹介をしましたが、今回はほかの対応方法の紹介です。

IE5を対応ブラウザにするかしなかで、分けてみました。

• clearfixのIE5.5～IE7対応版
• clearfixのIE5～IE7対応版
• clearFixの注意点
• clearFixの紹介サイト（英語）

「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）