コーディングする上で今では当たり前となっている
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でハマった際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

IE8でのclearfixの挙動

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner