IE6でposition:absoluteしたボックスが消えるバグ

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。maiです。
IE7の登場により徐々にシェアを減らしつつあるIE6ですが、
そうはいってもまだまだ健在です。
そしてそのバグもまだまだ健在です…。

今回はpositionの値をabsoluteにしたボックスが、
なぜかIE6で見えなくなってしまうバグについてその対処法をご紹介です。

このバグ「absolute position disappearing bug」というバグらしいのですが、
代表的なものに比べると、あまり知られていないことからわかるように、
ものすごく限定状況で起きるバグです。

今回私が遭遇したのはこのケース

1:position:absoluteしたdiv
2:float:leftしたdiv
3:float:rightしたdiv

positionの値がabsoluteで、なおかつすぐ次に続く要素がfloatしていること
が私の場合の発生原因だったようです。
この場合の回避方法は…

1:position:absoluteしたdiv
2:空っぽのdiv
3:float:leftしたdiv
4:float:rightしたdiv

これです。 スマートじゃないですね。わかってます。
でもどうやらこのバグを回避するにはスマートじゃないやり方しかないようです。
一番スマートなのは、このバグが発生しないようにデザインを組むこと…ですね。

なお、上記を含めたこのバグの発生条件と回避方法については
以下のページがわかりやすくまとまってます。
Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ（jmblog.jp）