Firefoxでの型崩れについて

質問

初心者ですので、基本的なことが分かっていないのかもしれませんが、ＩＥ６では正常に表示されるのですが、Firefoxでは横幅がはみ出てしまう　という型崩れが起こってしまいます。Firefoxでは、指定した幅よりも長くなって表示されているようです。
ｃｓｓにwidthとpaddingを同時に指定している箇所があり、それが原因なのでしょうか。
過去ログを見てみましたが、css親要素にwidth、子要素にpaddingを設定すると良いとの回答がありました。親要素、子要素とはどういったことでしょうか？
ブラウザによる見え方の違いを回避するよう　勉強したいのですが、参考になるサイトなどありましたらお教えいただけると嬉しいです！

回答No.1

abril · ベストアンサー

> widthとpaddingを同時に指定している箇所

Firefox（＋主要モダンブラウザ）とIE6では、上記の様な指定をしている場合（DOCTYPE宣言の種類やXML宣言の有無が関わってきます((DOCTYPEスイッチ、標準準拠モード／後方互換モード))。詳細は省きますので、これらのキーワードでググるなりして調べてみて下さい。）ボックスモデルの計算方法において解釈が異なってしまう事があります。
※ボックスモデルにボーダーを指定している場合、そのボーダーの太さも計算に関わってきます。

とりあえず、この問題については下記のサイトがとてもよくまとまっていてわかりやすいかと思いますので、ここの基礎編を熟読されてみることをお奨めします。かなりかみ砕いて説明されているので理解に苦労する事はないと思います。
【参考】http://www.geocities.jp/multi_column/

…ということで、上記を読んで頂ければ済む話ですが、とりあえずごくごくさわりだけを。
例えば、「全体の幅が100pxで、左右（上下は幅に関係ないので本件では考慮しません）の余白が10px」としたいボックス（仮に<div class="hoge">内包要素</div>とします。）があるとします。これをCSSで下記の様に指定したとします。

div.hoge {
width: 100px;
padding: 0px 10px;
}

この場合、IE6では「幅100pxでボックスをレンダリングし、その中から左右10pxを引いた残りの80pxの幅の領域に内包要素をレンダリング」します。
しかし、Firefox等では「幅100pxの領域に内包要素をレンダリングし、その100pxの外側に更に左右10pxづつの余白を取ってボックスをレンダリング」する為、ボックスの実際の長さは100px＋10px×２＝120pxとなります。ですので、もしhogeというボックスの幅を100pxで考えてレイアウトしていた場合、当然後者は想定外の領域まではみ出してしまう、という事になります。

しかしながら、CSSの仕様上では実はIE6での上記の様な計算方法は独自解釈（バグ）であり、後者の解釈の方が順当とされております。ですので、本来ならば：

div.hoge {
width: 80px;
padding: 0px 10px;
}

と指定するのが仕様に準じた記述です。
しかし、IE6ではこれだとボックス全体の幅が80px・内包要素のレンダリング領域が幅60pxになってしまいます。その為、CSSハックなどで処理を振り分けたり、DOCTYPEスイッチが標準準拠モードになる記述をしたり、といった色々な対処がなされるのですが、その様な異なる環境（とりあえずブラウザの事だと思っておいて下さい）間での差異を吸収する方法の一つとして、同一の要素に「widthとpaddingを同時に指定」しない、という逃げ道があります。質問者様が調べられところの「親要素にwidth、子要素にpaddingを設定する」というやり方ですね。

> 親要素、子要素とはどういったことでしょうか？

「これ」はCSSを適切に使いこなす上での重要なキーワードの一つです。「これ」についてきちんと理解できていないとCSSの”C”の部分を活かす事ができなくなりますので、CSS本を読むなり解説サイトを見るなりして習得しておく事が必須です。

上記は調べて頂くとして、「親要素にwidth、子要素にpaddingを設定する」というやり方のごく簡単な一例としてのサンプルだけ最後に。
【HTML】
<div class="hoge">←親要素
<p>内包要素</p>←子要素
</div>
-------------------------------------------
【CSS】
div.hoge {
width: 100px;
}
div.hoge p {
padding: 0px 10px;
}

お礼

とても基本的なことだと思われますのに、丁寧に教えてくださり、本当にありがとうございます！
教えていただいたサイトも　分かりやすく、とても参考になります！
基礎的なことをしっかり勉強して、見苦しくないＨＰを作っていきたいと思います。