ブラウザ互換について-width-

これまでにもブラウザによって表示のされ方が違うということは話題にしてきました。 いや、ホントに面倒な話ですが規格が統一されてないので様々な所で不具合が発生しちゃうんですよね。

前回のドキュメントタイプでも出て来た標準モードと互換モードなのですが、 いくつか、もう致命的に酷い違いがあるんですよ。

■widthについて
横幅を設定するwidthなんですが、 これの解釈からして違ってきちゃうんですよ。 あ、ボックス要素の表示サイズの話ですよ。

WinIE6.0を含めたモダンブラウザの標準モードでの解釈はこのような感じです。
実際に表示されるサイズ = width + border + margin + padding

例えば、このような設定の場合、
.test { width:100px; border-width:1px; margin:5px; padding:5px; }
<div class="test">&nbsp;</div>

このdiv要素の横幅の実際の計算はwidthの100pxではなく、
width100px + border2px(右と左の2つ分)+ margin10px(右と左の2つ分)+ padding10px(右と左の2つ分)
合計122pxとなります。

つまり、モダンブラウザでのwidthとはあくまでテキストを表示させる部分のサイズだと覚えておくと良いでしょう。


逆に互換モードと昔のブラウザの場合はこんな感じです。
実際に表示されるサイズ = width
この場合、widthにborder、padding、marginの幅も含みます。

例えばこのような設定の場合、
.test { width:100px; border-width:1px; margin:5px; padding:5px; }
<div class="test">&nbsp;</div>

上記の設定と全く同じですが、実際に表示される横幅は100pxであり、 内容を書く部分は78pxしか無くなってしまうという事になります。

つまり、互換モードや昔のブラウザの場合、widthとは全横幅のサイズと覚えておくと良いでしょう。



HP作成-応用編-

外部ファイルを使ってみよう
リンクの設定変更
お気に入りに追加+ホームに設定
非推奨タグ・属性
ドキュメントタイプについて
ブラウザ互換について-width-
ブラウザ互換について-継承-
ブラウザ互換について-外部CSS-

▲このページのトップに戻る

幸せなお金持ち
Webノウハウ・ラーニングコース

当サイトは上記の「Webノウハウ・ラーニングコース」の正規パートナーサイトです。 私の紹介で購入すると10%OFFになります。

w6669」←が私のギフトナンバーですので、 ご購入の際には是非お使いください♪

Webノウハウ講座の感想

【PR】 釣具販売【楽天】  ルアー・フィッシング【楽天】