低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

IE6でfloatを指定した要素の左右marginが大きくなる(倍になる)

写真をfloatさせてテキストを廻りこませたら、IE6だけ写真の位置が違う!なんて経験ないでしょうか。

ie6での表示 ie7での表示 Firefox3での表示 Safari3での表示

これは特定の条件が揃った際に起こるIE6のバグなのですが…はてさてその発生条件とは。

発生条件

このバグはスタイルシートで次のような指定がされているときに発生します。

1.bug01 {
2        float: left;
3        margin-left: 10px;
4    }

このように float する方向に対し margin が指定されているとその値が倍になってしまいます。
もちろん float: right でも同様です。
サンプルを用意しましたのでIE6で確認してみてください。
◆バグサンプル

対処法

このバグの対処法ですが、次のようなやり方があります。

  • CSSハックを使いIE6だけ、margin値を通常の半分の値を指定する
  • CSSハックを使いIE6だけ、floatを指定した要素にdisplay: inlineを指定する

オススメは2つ目の方法です。1つ目の方法では、値が奇数だった場合に1pxの差が生じてしまいます。
2つ目の方法はinline指定しまうと要素の領域が広がらないと思いますが、IE6はinline指定がされていてもblock要素のように領域が広がるため、問題ありません。

———-

CSSでレイアウトを組むさいにこのバグは致命的とも言えますので対処法を必ず抑えておきたいですね。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ