『Clear Bothのブラウザ別仕様』:CSS2の正しい処方![4]/ブラウザ間の表示差を無くす

ClearBoth を使う時、行間などを空けるには注意が必要です。
先の例でいうとFooter部分をもう少し下げようとして
Marginを指定するとおかしなことになります。
Footerにマージンを上方向に30ピクセル追加してみます。
HTML例題を各ブラウザで検証してみてください。
■HTML例:例題

clearBoth_05

■Margin追加:firefox表示例

clearBoth_06

■Margin追加:IE6x表示例

このようにIE6ではきちんとマージンが効きますが、Firefoxでは効果ありません。
これも実は、FIrefoxの方がCSSの仕様通りに表示されているのです。
さきほど、ClearBothを指定しないと外側Boxの高さが確保されずに潰れてしまいましたが
あれと同じ理由でCSSの正しい仕様ではFloatを指定した要素を認識しません。
そのためマージン上限の基準が、IE6と違い、外側BOXの上端になるのです。

clearBoth_07

■マージン基準の違い説明図

その証拠にマージンの長さを要素の高さ以上に指定するとFrefoxでもきちんとマージンが確保されます。
■HTML例:例題

clearBoth_08

■超Margin追加:firefox表示例

clearBoth_09

■超Margin追加:IE6x表示例

もちろん、その分、IE6では大幅にマージンが空いてしまいます。
それでは、同じ表示にするには、どうするかというと、ここでもマージンとパディングで使った手法を採用します。
つまり、パディングを使います。
■HTML例:例題

clearBoth_10

■Padding追加:firefox表示例

ただしパディングを使うときは背景色を透明(transparent)にします。
これでIE6以降とモダンブラウザで同じ表示になります。
※ どうしても要素に色を付けたいときはClearboth要素をFooter にせずマージン専用のつっかえ棒と考え、真下に要素を追加し、それを色付きのfooterにします。

※:ClearBothを使用するより、もっと効率的でスマートな手法は次の記事をご覧ください。

Date : 2010/02/10 21:51

Posted by valley | | 編集/Edit