【標準モード】CSSにおける幅(width)の解釈の違いと対策【後方互換モード】

現在開発中のWEBサイトにおいて、CSSのwidthの解釈がieとfirefox他で異なっていたのを修正したことの覚書です。

(前提)

標準モードにおけるwidthの解釈

width = 内容物の幅のみ ※padding、borderを含まず

後方互換モードにおけるwidthの解釈

width = 内容物の幅+パディング + 線 ※padding、borderを含む

つまり、結果として、標準モードは幅が広く、後方互換モードは幅が狭くなる見た目になります。

(対策)

今回の自分のケースでは、

DOCTYPE宣言にトランジショナルでURI無し

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

を使用していたため、ieで後方互換モードとなり幅の表示が異なってしまってました。

そこで、

DOCTYPE宣言をトランジショナルでURI有りに変更しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

すると、ieでも標準モードが適用されることになり、firefox他のブラウザ同様の幅の表示がされるようになりました。

結論として、標準モードになるDOCTYPE宣言をし、CSSも標準モードに準拠するようにして、幅は、線・パディング・内容物の足し算で常に計算すると幅の見た目を各ブラウザで統一できそうです。

ちなみに、DOCTYPE宣言をstrictにするのも一つの選択肢なのですが、色々、第三者のタグを挿入するケース(アクセス解析や広告タグなど)も考えると、トランディショナルで妥協するのも現実的かなと思います。

カテゴリー: CSS, HTML パーマリンク

コメントを残す

メールアドレスが公開されることはありません。