web 覚え書き

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

.clearfix{zoom:1;} /* IE5.5～7 */

/* MacIE5のみ適用 ここから \*//*/
.clearfix{display:inline-block;}
/* MacIE5のみ適用 ここまで */



※IE8ではHollyハック内の指定も反映されるためレイアウトが崩れる。

※IE6～7用に
.clearfix{display:inline-block;}
を追記するとJavaScriptコンソールでエラーが出る。（Fox3？）

-------------------------------------------------

コリスさん　「clearfix」のIE5～IE7対応版
http://coliss.com/articles/build-websites/operation/css/125.html

• 「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:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

※display:inline-tableだとIE7で崩れる