IEでfloatさせたボックスのmarginが2倍になるバグ
- 2007年03月29日
- category:XHTML/CSS
- Comment(4)
- Trackback(2)
有名なバグではありますが、久しぶりに遭遇して困ったことになったので書き残しておきます。 実際どういう感じで表示されるかというと、下記のような感じです。
BOX A
margin-left:30px;
float:left;
BOX B
margin-left:30px;
上記例のBOX AとBOX Bの違いは左にfloatさせているか、いないかだけです。FireFoxなどのブラウザでは同じに見えていると思います。IE6で見るとfloatさせているBOX AのmarginがBOX Bのmarginの2倍の大きさになっているのがわかります。このバグの対処方はいくつかあります。
一番良い対処方法はmarginでなく、paddingを指定する手法です。paddingで置き換えられる場合はこれでいいんですが、どうしてもmarginじゃないとヤダ！って状況もあるわけです。
その場合は仕方ないのでハックしちゃいましょう。IEのみの現象なのでアンダースコアハックなどがお手軽でいいかなと思います。ハックで改良するとこうなります。
BOX C
margin-left:30px;
_margin-left:15px;
float:left;
これでめでたくIEと他のブラウザで同じように表示されるようになりましたが、ハックはできるだけ使わず極力paddingで対処したいものです。ちなみにこの現象はIE7では修正されています。
- Prev Entry
- ページの高さを自動調節するjavascript
- Next Entry
- 年齢と誕生日の変換プログラム[PHP]
コメント一覧
-
検索できますた 2007年4月6日 17時17分
IEのfloatのバグの対処法にこんな方法があったんですね！
ものすごく参考になりました！ありがとうございます。 -
hoka@管理人 2007年4月6日 18時12分
>検索できますたさん
コメントありがとうございます！お役に立てて光栄です。
アンダースコアハックはお手軽で便利なんですよね～。他にも使いどころは多いですよ。 -
hama 2007年8月27日 12時26分
アンダースコアハックはCSS仕様違反なので、仕様に準拠した回避方法があるならそのほうがいいと思います。
書き方はほとんど変わりませんし…
http://kikky.net/pc/bro_discrete.html
またmarginを２つ書かなくてもdisplayの指定で簡単に回避できます。
他のブラウザが仕様どおりなら問題がありません。
http://kikky.net/pc/css_bug041.html -
hoka@管理人 2007年8月27日 15時10分
＞hamaさん
ご指摘ありがとうございます。たしかにアンダースコアハックはあまりよろしくはないですね。
セレクタをもう一つ書く手間を惜しんでアンダースコアハックを使ってしまいました･･･
いけないことです。
ちなみにアンダースコアハックを使わなかったら下記のような感じが一番スマートかな？
div.boxC {
margin-left:30px;
float:left;
}
* html div.boxC {
margin-left:15px;
}
displayによる回避は知りませんでした･･･もっと勉強します。
トラックバック一覧
CSS Lecture 2008年7月24日 12時50分
IEでfloatさせたボックスのmarginが倍くらいになる…
CSSレイアウト初心者が一度は経験するであろう。このIE6でfloatさせたボックスのmarginの解釈の違いだと思います。 よくIEだけが右カラムが落ちてる…って
CSS Lecture 2008年7月31日 23時08分
IEでfloatさせたボックスのmarginが倍くらいになる…
CSSレイアウト初心者が一度は経験するであろう。このIE6でfloatさせたボックスのmarginの解釈の違いだと思います。 よくIEだけが右カラムが落ちてる…って (more…)