Mozilla の憂鬱

◆座標系とレイアウト

HTMLの矩形要素には margin, border, padding 等の要素があります。 これらは通常は気にしませんが、 absolute なレイア等を使用して緻密なレイアウトのページを 作成する際に、時として問題になる場合があります。

そこで、これらの値を各ブラウザがどのように扱っているかを比較してみましょう。

ボックスモデル( Box model )

W3C の Cascading Style Sheets, level2 CSS2 Specification にはボックスモデルの レイアウトとして以下のように定義しています。

BODY部の扱い

BODY部はドキュメント全体を示し、その幅を決定する要素としてブラウザの ウィンドウ幅があります。

ブラウザのウィンドウは CSS2 の視覚整形モデル( Visual formatting model )では メディアタイプ( Media types )として識別されるものの、 その扱いは UA 依存のようです。

そこで、各ブラウザで margin, border, padding を指定してみると 以下の違いがあることに気がつきます。

共通

・margin は省略した場合の値が 0 ではなく、その値もブラウザ毎(？)に異なる

IE4/IE5

・border はウィンドウ枠の内側に属し Content領域の周囲にはない。

・content の幅は常にウィンドウ内でとれる最大の幅。

・座標軸の原点は border枠の内側の margin 左上コーナ。

・ドキュメントの幅( scrollWidth )は margin枠の幅ではなく、 margin枠の左端から実際の描画するもののある最右端までの長さに margin, padding のサイズを加えたもの。

NN4

・margin, border, padding の順番は同じだが各要素間に間隙がある。
#> この間隙も margin ( やはり、色は指定できず、透明 )だったりして？ まさか...

・content の幅は margin 指定がないと最小の幅と高さ。

・座標軸の原点はウィンドウ左上コーナ。

・ドキュメントの幅は margin 領域を含む幅だが、 margin 指定をしない場合で 見かけ上の content がウィンドウ枠より小さい場合は window.innerWidth/Height に同じ。

・結局ドキュメント領域にはスクロールバーが含まれる。

Mozilla

・margin, border, padding の順番もサイズも指定通り。

・content の幅は常にウィンドウ内でとれる最大の幅。

・座標軸の原点はウィンドウ左上コーナ。

・原点側に近い maring, border を含むが遠い側は含まれない。
#> M14より

つまり、BODY部に margin,border,padding に幅がある場合、 クロスな環境で BODY部 に直接記述したものとスクリプトなどで位置を調整したレイアを 厳密にレイアウトすることは不可能に近いと思われます。
#> 全く手がない訳ではありませんが、現状レベルの Mozilla も 考慮すると不可能かも... f(^^;

もし、その必要があるなら各属性値を明示的に 0 に指定した方が良いでしょう。

レイアの場合は

では、レイアに対して指定するとどのようになるでしょう。

IE4/IE5

・指定した座標は margin の左上コーナ

・指定した幅・高さには border が含まれ、 margin は含まれない

・Content が width,height より大きい場合、 Content は伸長され margin, border, padding もそれに従う

・clip 指定は border を含めたサイズで clip される

NN4

・指定した座標は margin の左上コーナ

・指定した幅には margin が含まれない

・border の高さは Conent に依存した最小の高さになるが、 レイア自体の高さは指定した高さ

・Content が width,height より大きい場合、 Content は伸長され margin, border, padding もそれに従う

・clip 指定は margin 領域を含めたサイズで行われる

・layer-background-color を指定すると margin-left, margin-top にも配色される

Mozilla

・指定した座標は margin の左上コーナ

・幅・高さは margin, border, padding を含まない

・Content が width, height より大きい場合、 overflow:auto;( UA依存 )だと伸長されるが、W3C CSS2 の推奨と異なる。
#> M16から、で、流動的( どうも開発段階のようで調整中らしい )

・width, height を指定しない場合、 position が absolute, fixed 指定は必要な最小サイズで、 static, fixed はウィンドウの右端までのサイズ。
#> M16からで、未だ流動的 f(^^;;

・clip 指定は効かない( M12, M13 )
#> これウソ。詳しくは「Cross Tips - clip プロパティの落とし穴」参照。
#> でも M16 では調整中らしい... 本当にそーするのかは分からないが、 position:absolute な場合は CSS2 ではなく旧仕様に戻っていた...

・clip 指定の座標の原点は border 左上コーナー

やはり、margin, border, padding などを指定すると 旨くレイアウトできるとは思えません。
各ブラウザで全く同じレイアウトにしようとするなら、 margin, border, padding は指定しない方が良いでしょう。

#> 中には TABLE タグの border のように明示的に数値を指定しないと 0 とならないものもあります。

#> 上の項目には( 特に NN4 )実際には条件があり、 Content に実体があるかどうかで表示が変わる場合がありますが、 詳細については各自で調査してみてください。