MacIEでfloatするときのバグ？
最近は、ほんとCSSレイアウトで製作するのが主となってるんですが、そこでよく出会うMacIE用のバグみたいなものの対処法メモ。
例えば、2カラムのレイアウト作るときに、メインコンテンツにfloat: left;、メニューにfloat: right;を指定するとします。
で、なんらか他の要素も相絡まって、その親要素にclear: both;をしてしてると、floatが崩れる。
ってか、floatしない。
これ、たまにはまる…。
『あれ？なんで？』ってのが、結構…。
これを解決するのは簡単で、まずは原因となってるclear: both;をはずす。
すると、まぁ、あちこちにガタがきてしまう場合もあるわけです。
もしかしたら背景が出ないとかってのもあるかもね。
そこで、最近流行の？clearfixの登場です。
これ、設定しておけば背景出るし、floatするし、簡単だし。
clearfixについては、その言葉で検索すれば見つかります。
って思ったんだけど、もし、それ目当てで来てる人がいたらってことで、以下に。
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
詳しい説明は他所を参考に(^^ゞ
まぁ、これだけコピって、class="clearfix"ってつけておけば、大丈夫。ってことですな。
（超いいかげん…）
スポンサードリンク
タグ:
CSS , IE5 , Macトラックバック
このエントリーのトラックバックURL:http://www.sriproot.net/mt/mt/mt-tb.cgi/177
