ボックス利用の注意事項

DOCTYPEスイッチ問題

IE6は、標準準拠モードを有効にするように !DOCTYPE を設定すると、プロパティ width および height は、それぞれボックスの左辺と右辺の間、および上辺と下辺の間の距離を指定します。ここには、border および padding は含まれません。

NN6やFirefoxは標準準拠でブラウズしますので、IEとの表示に違いが出てしまいます。つまり実際に最大幅はwidth＋border＋padding となる

IE7 ではこの問題は修正され、XML宣言のあるページでも適切なモードで表示されるようになっている。

文書型宣言とブラウザ別モード一覧表
文書型宣言 MacIE5 Gecko WinIE6 Opera7
宣言なし 互換 互換 互換 互換
未知の宣言 標準 標準 標準 標準
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0//EN">		 標準 標準 標準 標準
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD html 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">		 標準 標準 標準 標準
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0
 Transitional//EN">		 互換 互換 互換 互換
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.0
 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">		 標準 互換 標準 標準
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01//EN">		 互換 標準 標準 標準
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">		 標準 標準 標準 標準
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01 Transitional//EN">		 互換 互換 互換 互換
<!DOCTYPE HTML PUBLIC
 "-//W3C//DTD HTML 4.01
 Transitional//EN"
 "http://www.w3.org/
TR/html4/loose.dtd">※3		 標準 標準 標準 標準
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">		 標準 標準 互換※1 互換※2

※1先頭に XML宣言を記述すると互換モードになってしまう。

※2XHTMLドキュメントがtext/htmlとして読み込まれ、XML 宣言がある場合、IE（6）とOPERA 7.0-7.03 では互換モードとなります。

OPERA 7.1 以降では、XML 宣言、PI 、およびコメントを無視して表示モードを決定します。

XML ドキュメントの場合、OPERA とIEは標準モードで表示します。

http://www.opera.com/docs/specs/doctype/

XMLドキュメント宣言のように!DOCTYPEの前に、
<?xml version="1.0" encoding="Shift_JIS"?>のように記述するとIE６は非標準モードになります。現在webの情報では、widthと一緒にpaddingはつけるなが一般的です。この場合、DIVの入れ子を行い、外枠のボックスと中身のボックスを別に指定します。

BOX利用のmaergin,border,paddingのイメージ

上の図からわかるように、実際のコンテンツ領域から外側へボーダや余白を加え最大幅を決めると良いでしょう。


目的別属性

広告