コーディングする上で今では当たり前となっているfloatを使って回り込みをした際の解除指定の「clearfix」。
この記述方法についてはいくつかパターンがありますが、うちでは
—————————————–
.clearfix:after {
content: “.”;
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
—————————————–
の記述を基本としています。
ですが、この記述方法では「IE8」では、ページ上にJSを使って高さが可変する動きをつけるとブロック要素ごとに重なりあったりする不具合が生じることがちらほら。
そんな際にはIE8のみ“display”要素を“inline-block”から“block”に変えることで解決できます。
◆IE8ハック——————————
html>/**/body .clearfix { display /*\**/: block\9 }
—————————————–
ここでは対象を「.clearfix」クラスにしていますが、プロパティ毎にclearfixの指定を加えている場合は、IE8対策は不具合が生じた特定プロパティのみにする方が安全かと思われます。
clearfixのIE8対策としては以下も参考になりそうです。
≫LifeScape: IE7,8にも対応するclearfix
IE8でハマった際に是非。。。