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 が苦手なのかなぁ。ちなみに私も最初はちんぷんかんぷんでしたが、ホップ本（再出版バージョン）で完全に使いこなすことが出来るようになりました。えっへん。
About this entry
オススメ
2 Trackbacks
trackback uri:コメントやトラックバックは承認待ちになる場合がありますので、すぐに反映されない場合はしばらくお待ちください。