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

htmlソース上では下方に置いてある検索窓などを、position:absoluteでページ上部に絶対配置する。よく使われる手法だと思うんですが、Win IE（Windows Internet Explorer）ではposition:absoluteを指定した要素が表示されない場合があるみたい（IE6/IE7 beta 2）。IEのバグ？(仕様なのかバグなのかは知りません)

例えば下記のような順序で組まれた物。

1. カラム : float
2. カラム : float
3. 検索窓 : position:absolute
4. フッター : clear:both

html上では検索窓がfloatとclearに挟まれている。検索窓はfloatとは無関係に配置出来るはずだが、IEでは表示されない時は全く表示されない。(何故か時々表示されたりする)。

たぶんIEのバグだと思うが、このバグらしき症状についてのページは、GoogleとYahoo!で検索かけても見つける事が出来なかった。IEはfloatの影響下なのか、それともposition:absoluteなのかを迷ってしまうんですかね？
(´Д｀＝´Д｀)？

IEのためにclear追加

これは検索窓の手前にclearする要素を挟んで、floatによる影響を解除するしかない（CSSのみでの回避策があれば良いのだけど..）。挟む物が無い場合は、取り合えず区切り<hr />等を入れ、CSSでclearを指定。

hr{
 clear:both;
}

更に、hrを表示されないようにしたい場合は、CSSでwidth:0pxとか。

hr{
 clear:both;
 width:0px;
}

display:noneでも表示されないけど、それだとclearが効かなくなるので意味が無い。

2006/04/27 | HTML/CSS | ↓コメント 1 | ↓トラックバック 3