2005-04-04

IEでフロートさせたボックスのマージンが倍になるバグ

WindowsのIE5.5や6など(5とか5.01は知らない)にはfloatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。最近はfloatを使ってゴニョゴニョする機会も多いと思うので厄介に考えている人も多いでしょう。実はdisplay: inline;とか指定してやると回避できちゃったりとかします。ネタ元はThe IE Doubled Float-Margin Bugだったような気がしますが、別なところで見つけたような気もする。

バグの状況自体は上記CSSバグリストのURLを参照していただければわかりやすいです。と言いつつ回避手段の使用前/後を並べてみたHTMLを用意してみました。IEで見れば一目瞭然で、1つ目のコンテナ内のフロートさせたボックスの左のマージンは倍(80px)になっているのに対し、2つ目のコンテナ内のフロートさせたボックスの左のマージンは指定どおり(40px)です。

コードはfloat: left;(float: right:)と同時にdisplay: inline;を指定するというだけで、HTMLに特に手を加える必要も、IE用にCSSコードを切り分ける必要もありません。

#floatbox {
  margin-left: 40px;
  float: left;
  width: 160px;
  display: inline;
}

FirefoxやOperaではCSS2の仕様に従ってfloatを指定した要素へのdisplayの指定を無視してくれる(See Also: Positioning the float: the 'float' property)ということもあるので、将来的にもdisplay: inline;という意味の無い指定による誤作動は起こらないんじゃないかなと。

バッド・ノウハウ。