「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。</div>例1(ブログ)class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。例2(ウェブサイト)class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。例3(画像)class="leftBox"、class="rightBox"ともに画像でfloatを使って並べている。後方互換モードを示しています。ExplorerはMacIEとして明示します。#000000;}一番外側のボックスには以下のようなスタイルが記述されています。20px;}そもそもfloatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまいます。上記のスタイルの場合、IEやFirefox、Operaではpadding分の背景(緑色)とボーダー(ピンク色)しか表示されません。これは、ブラウザのバグではなく、正しい挙動です。#000000;}一番外側のボックスには以下のようなスタイルが記述されています。beta)で背景(緑)が内容のボックスの高さに合わせて現れます。この挙動はIEのバグで、Firefox、Operaなどでは依然背景は一部しか出ません。ここで、よく聞く「IEでは背景出るのにFirefoxで見たら背景出ない」という現象が起きているわけです。一般的な解決方法ですが、最終的には問題があります。#000000;}一番外側のボックスには以下のようなスタイルが記述されています。block;}/**/モダンブラウザ対策#containerC:afterにcontentを指定すると、ボックスの中の一番最後に新たなテキストや画像を挿入することができます。both"をかけることによってボックス内のfloatをすべて解除することができます。すると、floatしているボックスの高さに応じて外側のボックスの高さが拡張されるようになります。現在、擬似要素":after"と"content"が解釈できるブラウザはFirefox、Opera、Safariなどのモダンブラウザのみです。beta2でもサポートされていません)。1em;}バックスラッシュハックと、スターハックを用いてWinIE5.0~6.0のみ指定を有効にする方法を使っています。WinIE5.0~6.0には外側のボックスに高さ(値は何でもよい)を与えると、内側のボックスのフロートに関わらずボックス高さを拡張してしまうバグ(仕様?)があります。それを利用して、背景を表示させるようにしています。このハックはIE7では理解できません。WinIE5.0~6.0のみに指定するかというと、FirefoxやOperaなど正しくCSSを理解できるブラウザでは指定した高さ(上記では1em)の影響が出てしまうためです。これはボックスの最小高さを指定するもので、現在リリースされているモダンブラウザでサポートされています(IE6は含まれません)。この指定を入れることでIE7で外側のボックスの高さをフロートした内側のボックスの高さに合わせて拡張することができます。"1em"の高さ自体は1pxでも1%でもなんでもよいと思います。XXpx"を外側のボックスに指定することで高さが拡張され背景色が表示されることを確認しました。毎度幅指定ができるわけではありません。リキッドレイアウトで、ボックスの幅は%指定、左右の余白(padding)がpx指定の場合です。min-heightでボックスの最小高さを指定することで他のブラウザで影響はないはずです(内容物が1emより小さい場合は最小高さを変える必要はあります)。betaで有効になるというだけで、正式版で有効になるかどうかはリリースされてみるまでは分かりません。inline-tableと記述することで、MacIEでも外側のボックスの高さを内容にあわせて拡張することができます。blockになるように指定してあります。inline-tableをCSSに記述するとFirefoxのJavaScriptコンソールが以下のようなエラーを吐き出します。プロパティの値をパース中にエラーが発生しました。このスタイル宣言は無視されました。無視されているのなら問題ないのですが、非常に気持ち悪いです。JavaScriptでobject.style.displayの値を切り替えたりするときに、ブラウザ振り分けなどの面倒な事態が発生することが予想されます。absolute)で配置しようとしても、意図とは反した場所に表示されてしまう現象を何度か経験したことがあります。overflowを使う他にもoverflowを使う方法もあります。スクロールバーが出てしまいます。スクロールバーが出るようです。ういことだそうで、実際にNetscape7.1で表示させてみたら、見事に表示されませんでした。片方を立てればもう一方が立たず。最新のNetscape日本語版が7.1であることを考えるとかなり致命的であることは言うまでもありません。overflowをMacIEで使う際、注意点があります。overflowを使う」でいくつか問題点がわかりました。#000000;}CSSの記述は以下のようになります。hidden;はMacIEで背景色を表示させるための記述です。これで、displayの値はblockのままとなりJavaScriptでのobject.style.displayを操作する場合も問題なくなります。visibleを指定してあります。"#containerD:after"を記述することによってNN7でも問題なく表示されるようになりました。hiddenを使用すると外側のボックスの高さがフロートした内側のボックスの高さによって拡張するのはバグでもなんでもなくて仕様のようです。betaでも問題なく表示されます。あれこれCSSソースを書いていますが実際必要な部分は下記のソースとなります。visible;}/**/以上が今回の調べで分かった「CSSで段組したらFirefoxで背景が出ねーよっ」への最終回答となります。番外編(お勧めではないですけど)実はややこしい方法をせずとも、背景を表示させる方法はあります。HTMLソースは以下のようになります。id="box">で囲んでcontainerDをフロートさせると、不思議なことにcontainerDに指定した背景色が表示されるようになります。Netscape6.0でレイアウトが著しく崩れます。id="box">を追加しているので、お勧めではありません。/>をcontainerD内に挿入する方法もありますが同じく見栄えのための要素追加なので、お勧めではありません。そもそも<div>で囲むこと自体「見栄え用」じゃないのか?と思いますが、要素(h1とかpとか)を括る箱として使っていれば、あながち意味の無い要素というわけではないと勝手に解釈してします。inline-tableを与えると内側の子要素の絶対配置がうまくいかない現象を追加。Fsikiがウェブ上から得た情報と実作業で得た経験から極私的にまとめたものです。内容に誤りなどがあるかもしれませんので、見つけられた場合はこのドキュメントの編集後記にコメントいただければ幸いです。FsikiHelpXHTMLCSS。