IE6でマージンが2倍になるバグの対策は


皆様コーディングしていますか?
日々ブラウザのバグ達と戦っていますか?
特にIE6とかIE6とかIE6とか・・・
IE6で「キーッ」となるバグの一つである、floatしたボックスのmarginが倍になるバグ。
大体はpaddingで代用が出来るのですが、どうしてもmarginが使いたい時があったりします。
ボックスに背景が指定してあったり、よくわからない隙間が出来てしまった為にネガティブマージンを使いたい時とか。


私は後者で、paddingも0、marginも0、heightも正しく指定しているのになぜか下に3pxほどの隙間が出来てしまっていたのです。
(IE6でフロートされたボックスにmargin-bottomが効かないっていう記事もどこかでみかけたけれど、それじゃないような。。)
IE6だけのバグで原因もよくわからず、とりあえずネガティブマージンで詰めようにも、値が倍になってしまってボックスが若干重なってしまったり。。。

そんな時、コリスさんの記事で紹介されていたIE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet – コリスが凄く助かりました。
この中で海外の記事が紹介されているのですが、リストアップの中に
「IE6のフロートのダブルマージンの対応方法」
があり、目からウロコでした。
まさか
display: inline;
これでけでいけるとは、、、凄く簡単ですっ。

私もこれとCSSハックを組み合わせて、IE6対策が無事できました。
ul {
float: left;
padding: 0;
margin: 0;
_margin-bottom: -3px;
_display: inline;
width: 120px;
height: 73px;
}
とすることで無事きれいに表示されるようになりましたよ!
CSSハックは出来るだけ使いたくないですが、とはいえそのために工数を無駄にかけるわけにもいかず、CSSハックで対応しました。

Tag ,

コメントを残す