にこにこ風味 :: Weblog » Blog Archive » IE6 の “Peekaboo Bug”

このバグが有名なのか、そうでないのかは知らないけども。このバグに遭遇しても対処法を検索してもなかなかヒットしなくて悩んでしまった。 挙動としては CSS の float 属性を使用していると、float に内包されたコンテンツ、または float 要素に接する一部が一部表示されなくなるというもの。表示されないと言っても、スクロールしたり、選択すると現われる。その動きが “いないいないばぁ” と似ているので ‘Peekaboo’ と呼ばれるらしい。 詳細な説明は Position Is Everything に詳しくあります。 簡単な対処法は上記のサイトや次の evolt.org にあるように、float に含まれる要素に position: relative を指定するとバグを回避できます。 しかし、これではCSSの可読性も落ちるし、複数の要素に指定してやらなければならないので、面倒なので

[uduca]

表示崩れ。ピーカーブーバグ

[miracle1998]

恐ろしくはまってしまったので（泣）、ブクマします・・floatの親要素にwidth指定すると直ります。

[k1m]

float とスクロールで出たり消えたりするあの IE バグの対処法

[wablog]

確かに回避策を見かけたことが無い。

[wacky]

IE6でコンテンツの一部が消えるバグの回避策。しょっちゅう遭遇して何かと思ってたが、そういうことか。