IEで絶対配置(position:absolute)のボックスが消えるバグの検証

先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。

まず最初に見つけたのが、以下のサイト。

» IEで position:absolute した要素が消えるバグ

こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う~ん、なぜだ・・・

日本語のリソースを調べてみても解決策が全然見つからないので、英語のリソースを探してみたところ、ずばりなページを発見しました。

» IE/Win: Disappearing position:absolute boxes near to floats and clears

なかなか興味深い内容だったので、このページをもとに自分でもテストをしてみました。その結果をまとめたのがこちらです。

» Win/IEで絶対配置(position: absolute)のボックスが消えるバグの検証ページ

(なお、内容がほぼ同じということで、公開にあたってオリジナルページの作者である Bruno Fassino 氏にメールで許可を求めたところ、快諾とともにいくつかアドバイスまでいただきました。あらためて感謝いたします。Thanks Bruno! )

整理すると、次のケースで position:absolute のボックスが消えるようです。

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

それぞれの対策はいろいろあるので、詳しくはテスト結果のページをご確認ください。オリジナルにはないものもいくつか存在しています。なお、hasLayout についてはこのあたりが詳しいです。

» IEでのCSSのバグを回避するhasLayout | コリス
» ウノウラボ Unoh Labs: hasLayoutとは何か

しかし、IE はいろいろと厄介ですねぇ・・・

おまけ

日本語でこの問題を取り扱っているサイトがあまりないのはなぜでしょうね?position:absolute をあまり使わないからそもそも出くわさないとか?みんな position が苦手なのかなぁ。ちなみに私も最初はちんぷんかんぷんでしたが、ホップ本再出版バージョン)で完全に使いこなすことが出来るようになりました。えっへん。

IEで絶対配置(position:absolute)のボックスが消えるバグの検証」への13件のフィードバック

  1. ピンバック: links for 2007-10-23 « 個人的な雑記

  2. 感謝する人

    同じ問題にぶち当たり、参考にさせていただきました。
    非常に助かりました。
    ありがとうございました。

    返信
  3. Yoshihide

    >「感謝する人」さん
    ご丁寧にコメントありがとうございます。
    お役に立てたようでこちらとしても嬉しい限りです。

    返信
  4. hiroe

    まったく同じ現象で悩んでおりましたが、
    おかげさまで解決することができました。
    ありがとうございました。

    ブログにて記事を引用させていただきました。
    問題がございましたらご連絡お願いいたします。

    返信
  5. Yoshihide

    > hiroe さん
    コメントありがとうございます。
    問題が解決できてよかったです。
    ママさんなんですね。子育てもがんばってください!

    返信
  6. ピンバック: position:absolute;した要素がIE6で消えるバグ at @NATURE

  7. ピンバック: IEのバグ? | Satake Studio Developer's Blog

  8. 大感謝する人

    同じ問題で困っていましたところ、貴殿のこのページを見つけて解決できました。IE6のみの現象でした。Test 2 の解決方法 #3 で解決できました。それ以外も試してみましたがダメでした。
    すごく感謝しています。ありがとうございました。クライアントに今日中に見せないといけなくて焦ってましたが、今やっと心が軽くなりましたv

    返信
  9. ピンバック: ie6 positionとfloatのバグ | PCスキルの小技・忘却防止メモ

  10. ピンバック: Internet Explorer6のバグまとめ | モアカレントの徒然なる日常

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>