IE6 の float 指定した時の margin バグ回避策
2007/04/16 Mon [Edit]
覚え書きです。
CSS でブロック要素に float を指定した際 margin の auto が効かなくなる(左右のセンター揃えが効かなくなる)ので px などでキッチリと指定します。
しかし、IE6 のバグで float を指定した際の margin が2倍になってしまうバグがあります。
なので、IE6 用の有名な CSS ハック(*html)を使用して以下のように回避します。
*html div#hajime { /*IE6用のハック*/ width : 450px; float : left; margin : 10px 5px; /*通常指定の1/2で指定*/ } div#hajime { /*その他のブラウザ用*/ width : 450px; float : left; margin : 10px 10px; }
●結論
IE6 はフロート食べると太るから margin は半分。
CSSハック一覧表を作りました。
■追記(2007/08/28)
記事へのコメントで hamaさんから貴重なアドバイスを頂きました。上記のバグの回避方法として下記のプロパティが有効とのことです。私はまだ使用させて頂いていませんが、CSS ハックで解決するよりも簡単な方法だと思いますので、この記事をご覧の方でご存知なかった方はどうぞ。
display : inline;
何か他に影響が出ないかな?なんて考えてしまう回避方法ですが杞憂で済みそうです。
CSS2 の仕様では「float を指定した要素は display の指定を無視する」
と言うことなので、Firefox と Opera などでは OK とのことでした。
後日、Mac の Safari などでも確認しましたがまったく問題なしでした!
*hamaさんアドバイスありがとうございました!勉強になりました!*
Comments
displayの指定で簡単に回避できます
marginを2つ書かなくてもdisplayの指定で簡単に回避できます。
他のブラウザが仕様どおりなら問題がありません。
http://kikky.net/pc/css_bug041.html
hamaさん、はじめまして。
アドバイスありがとうございます!
display : inline;
を付けるだけで解決するとは知りませんでした。簡単で良いですね。
記事に修正を加え、次に float させた時の margin の問題に直面した時は hamaさんに教えて頂いた方法を使わせて頂きたいと思います。
本当に貴重な情報ありがとうございます!勉強になりました!
Track Backs
TB URL
floatを使ったときにIE6ではmarginが2倍になる件
ここ2、3日ずっと後回しにしていた問題がやっと解決。CSSでfloatを使ったときに、IE6だけmarginが2倍になるバグをようやく回避できました。忘れないうちにメモっておきます。※margin-leftで10pxを指定したい場合解決策1 display:inlineを使用#testArea{ width:280p...