IEで position:absolute した要素が消えるバグ
2006/04/27 | HTML/CSS | 
htmlソース上では下方に置いてある検索窓などを、position:absoluteでページ上部に絶対配置する。よく使われる手法だと思うんですが、Win IE（Windows Internet Explorer）ではposition:absoluteを指定した要素が表示されない場合があるみたい（IE6/IE7 beta 2）。IEのバグ？(仕様なのかバグなのかは知りません)
例えば下記のような順序で組まれた物。
- カラム : float
- カラム : float
- 検索窓 : position:absolute
- フッター : 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 | Comment 2 | Trackback 3
Trackback
http://pinotan.blog15.fc2.com/tb.php/195-e0a6b7df
- IEで position:absolute した要素が消えるバグ
今日もまた仕事でのこと…… IE6の印刷不具合の対応を地道にやっていたときのこと... ...
AIRE-PROJECT BLOG ： 2007/01/26 15:23
- 幅可変2カラムになりました。
できたー。positionとfloatを使ってソース上では下にある部分(ID：links)左カラムにしてます。けど、IEにバグがあってposition:absolute した要素が消えてしまった('A`)一応解決策が下記のページにありました。IEで position:absolute した要素が消えるバグここで.... ...
自宅警備員症候群 ： 2007/03/25 22:58
- IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ... ...
jmblog.jp ： 2007/10/23 01:46
Comment
そのバグはabsolute position disappearing bugといわれるものです。
IE6のみで発生します。
これを回避するには、あまりやりたくはないと思いますが(xhtml)1にdivを追加するしかありません。
どこに追加するかというと、発生してるボックスの親要素と発生しているボックスの間にです。
私も最初はPee ka boo1の一種かとおもいましたがドイツのサイトに同様のバグの記述がありまして解決しました。