アーカイブ

IEでposition:absoluteした要素が消えるバグへの対応

この2週間ほど仕事ががっつり重なって、6日ぶりに外出・行き先はコンビニ・屋外滞在時間10分、みたいな日々でした。何年かぶりに徹夜もしました。朝日って、まぶしいよね…

普段、Webデザインするときはいかに簡単なコーディングにするかを考えながら作るんですが、多忙のため頭が回らず、ちょっと面倒なデザインにしてしまいました。あまり普段は使わない「position」を使って対応することにしたのです。が。IE6~全部で、その絶対配置した要素がまるっと消えちゃう。なにこれ。

で。対処方法をググりましたところ
jmblog.jp – IEで絶対配置(position:absolute)のボックスが消えるバグの検証
こちらのブログを参照しました。問題が発生するのは以下のケース。以下4行転載。

  • position:absolute が float と hasLayout をもつ clear の直前に存在する場合。
  • position:absolute が float と hasLayout をもつ clear との間に存在する場合。
  • position:absolute が width:100% の float の直前に存在する場合。(IE6以下のみ)
  • position:absolute が width:100% の float の直後に存在する場合。(IE6以下のみ)

floatはあってもなくても発生するのね…。
対策としては、「divを追加する(ボックスの中身は空で可)」。
もしくは、「hasLayoutプロパティを持たない clear を使う」。