このバグが有名なのか、そうでないのかは知らないけども。このバグに遭遇しても対処法を検索してもなかなかヒットしなくて悩んでしまった。
挙動としては CSS の float 属性を使用していると、float に内包されたコンテンツ、または float 要素に接する一部が一部表示されなくなるというもの。表示されないと言っても、スクロールしたり、選択すると現われる。その動きが “いないいないばぁ” と似ているので ‘Peekaboo’ と呼ばれるらしい。
詳細な説明は Position Is Everything に詳しくあります。
簡単な対処法は上記のサイトや次の evolt.org にあるように、float に含まれる要素に position: relative を指定するとバグを回避できます。
しかし、これではCSSの可読性も落ちるし、複数の要素に指定してやらなければならないので、面倒なので Dracos さんの、float を含むコンテナの div 要素に line-height を指定するのが一番スマートだと思います。
自分の検索がヘタなのか、日本語サイトをググってみてもほとんどヒットしませんでした。このバグって出現率が高そうに思えるんだけど、常識だったのかな？
こんにちは。 Peekabooに困っていてググっていたらこのブログにたどり着きました。 2番目のDracosさんの対処法を見ようと思いましたがサイトに繋がりません。
＞float を含むコンテナの div 要素に line-height を指定する
これはfloatを指定した要素の親要素にline-height を指定するということですか？ もしよかったら詳しく教えていただきたいです。
JIJIさん >これはfloatを指定した要素の親要素にline-height を指定するということですか？
実際にやってみればわかると思いますが、そういうことです。
Dracosさんとこのサイト(時々落ちてるみたい)のように float要素 を含む親要素に line-height要素を指定すれば、一行書くだけなので、簡単にfixできます。 確か line-height: inherit; でも行けた気がします(うろ覚えかも)。
こんにちは。 Peekabooバグはfloatの親要素にwidthないしheight要素を指定することでも回避できます。 IEのポジショニング関係のバグは他にもいくつかありますが、大体はこの方法でfixできるみたいです。
Pingback: gmt-24.net » Blog Archive » Firefox Positioning Bug ?
Pingback: For me, music and life are all about style.