この記事はアピリッツの技術ブログ「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）
