ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

IE:絶対配置のボックスが消える件

November 17 2008

最近はブログのコーディングを勉強がてらよくやってるんですが
下方に置いてある検索ボックス(divで囲まれた部分)を絶対配置(position:absolute)で
最上段の右上に持って行こうとしてみたら

IE6、しかもIE7までがきれいにそのボックスだけ表示されない。
Firefox,Opera,Safariなどなどは全部OKなのに、IEだけがダメ。

「またかこのボケエエ!!!!IEィィィィィィッ!!」とか悪態ついたかどうかは
まあ上品なボクの事だからないとしてですねw
ちょっとこれはこまったぞ、と思って検索してみたらとてもよいまとめ記事がありました。

「IEで絶対配置(position:absolute)のボックスが消えるバグの検証」
http://jmblog.jp/archives/180
おおう!これはまさに今起こっている現象!

どうやらfloatとClearの条件が合致すると、この現象が起こるようです。

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

とても丁寧に検証と対処法が書いてありました。
http://jmblog.jp/misc/disappearance-of-an-absolute-positioned-box-in-win-ie/index.ja.html

今回の場合、消えたボックスをdivで囲む事によってこの現象を回避できました。

ほんとIE様にはいつも振り回されますね・・

| Posted in CSS, Web関連 | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Nov 2017 December 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31