Firefox 4 でブロック要素が重なり順を無視する

  • CSS
  • 現在地

あくまで Firefox 4.0 での挙動であり、その後のバージョンでは修正されるかもしれません。

問題

Firefox 4 が正式版になったので、さっそくインストールしたんですが、その後このサイトのチェックに使用してみたら、コンテンツ部分のスクロール中に、 <p> などのブロック要素がはみ出てフッター部分に重なる現象ががありました。(<object> の Flash に param name="wmode" を指定しない場合と似た現象)

原因

Flash に wmode を付ける前と似た現象だったので、試しに背景色を設定してみたら、ボックスからはみ出るような挙動は無くなりました。

どうやら、これらの要素にCSSで、background-color を指定していなかったことが原因のようです。

解決方法

現在この記述は使用していません。バージョン 4.0.1 でも修正されていなかったのですが、スタイルシートを何度も書き換えているうちに、この現象が起きなくなったので外しています。

おそらく、スタイルシートの記述の順番が関係あったのかもしれません。

とりあえず、背景色を指定する事で解決できたので、応急処置として全部分の背景色を指定するために、CSSに以下の記述をすることにしました。

  • *{
  • background-color: inherit;
  • color: inherit;
  • }

最初に全称セレクタ(*)で、全ての要素の背景色の値に inherit(継承)を指定します。これで、その後に背景色を指定した場所は、後に指定した背景色が適用されるので、とりあえずは問題は起こりません。(この場合、少なくとも親要素となる <body> には、inherit 以外の背景色を設定しましょう。)

なお、color: inherit; は、この問題には全く関係ありませんが、念のため入れてあるだけです。

今までのブラウザでは、値を入れていない場合は背景色は transparent として透過していたのですが、どうにも Firefox 4 では挙動が違うようです。(ただ、まだ 4.0 になったばかりなので修正されるかもしれません。)

スポンサードリンク

inserted by FC2 system