May 15, 2007
IE7のclearfix
CSSで僕が今まで使っていたclearfixは以下の様なものでした。
--------------------------------------------------------
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear{display:inline-table;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */
--------------------------------------------------------
ところがこれだとIE7に対応できません。
むむっと思って調べてみたら以下の形で解消できるようです。
--------------------------------------------------------
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear{display:inline-table;zoom:1;}
/* \*/
* html .clear{height:1%;}
.clear{display:block;}
/* */
--------------------------------------------------------
赤字の所が追記されてます。既存のソースへの追記だけでできたので一安心。
この情報は「STOPN'LISTEN」のエントリーを参考にさせてもらいました。
▼【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
http://stopnlisten.no.land.to/2006/11/ie7clearfixclear.html
yamada ： 9:51 AM
このエントリーのトラックバックURL：
http://www.link-log.net/mt/mt-tb.cgi/737