パソコンQ&A

Peekabooバグ
Internet Explorer 6のPeek-a-boo Bug
Peek-a-boo＝『いないいないばぁ』

Internet Explorer 6で、float領域とclear指定領域が接すると表示が隠れることがある現象のことです。

floatに重なる領域にリンク[a:hoverの指定アリ]があると現れたり隠れたりする。
ブラウザウインドウを最小化して開くと現れることがあります。

もちろんIE6のバグなのでそれ以外のブラウザでは正常に表示されます。

バグ発生の条件
以下の２つの条件が重なると発生します。
(1)floatを含むコンテナがclearを含むコンテナに接している。
(2)floatの親要素に背景色が指定されている。

a:hoverでアクションがあるとランダムに動作するようです。

バグ回避の方法
以下の３つのいずれかで回避できるようです。
(1)floatを含むコンテナのdivにline-heightを指定する。
(2)floatの親要素にwidthまたはheightを指定する。
(3)floatに含まれる要素にposition:relativeを指定する。

テストページ

下のものはその他のブラウザの方のためにJavaScriptで再現したものです。
これはバグではありません。