872 Style
  1. TOP
  2. MEMO
  3. CSS
  4. DTDとブラウザの表示モード

DTDとブラウザの表示モード

DOCTYPE宣言によって,ブラウザの解釈が切り替わるというものです.
ブラウザの解釈には2通りあります.

後方互換モード

旧来ブラウザとの互換性のあるモード

標準モード

W3Cの標準仕様に準拠したモード

  IE6を利用されている方で、IE7やFF、Operaにしてみたら、フォントが小さくなったり、width、padding、boderの設定で苦しんだ方。
 なぜそうなるかは、DOCTYPE宣言とブラウザの解釈の違いの影響があるのです。
 後方互換モードは、ブラウザに対して、慣習的な解釈をさせます。
 ここで,IE6のwidth解釈の問題があります、IE6は、widthの中にpaddingやboderを含むといったCSS2の解釈で言えばバグがあります。FFやOperaはwidthの中にpaddingやbooderを含みません。この問題は、レイアウトをカスタマイズする場合において、大きな影響を及ぼしてます
 標準モードは、W3Cに準拠している宣言なので、後方互換モードに述べたようなIE6のバグ解釈は行われません。ちゃんとFFやOperaと同様の解釈をします。しかし、ここにもIE6の落とし穴があります。DOCTYPE宣言で標準モードの宣言をしているにもかかわらず、DOCTYPE宣言の前に文字があると後方互換モードになってしまうバグがあります。
 具体的にいうと、

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 のように,DOCTYPE宣言の前にxml宣言がある場合、IE6は後方互換モードと解釈してしまいます。
 IE6、IE7、FF、Operaでもおなじレイアウトを維持するための簡単な方法(一般的な方法)は、標準モードのDOCTYPE宣言をして、xml 宣言を省いてしまうといった方法です。しかし,xml宣言はW3Cにおいて記述することを推奨していますので、IE6のために省くのはあまり好ましくないものです。標準モードでも後方互換モードでもレイアウトが崩れないようにするのは、2重化ボックスなど面倒な工夫がいるのです。
 ちなみにIE7ではこのバグは修正されています。IE6のシェアが低くなれば。xml宣言も気にせずに自由に使えるでしょう。

DOCTYPE 宣言 FF
2
FF
1
IE
7
IE
6
OP
9
OP
8
SA
2
NN
8
NN
7
IE
5M
なし 互換 互換 互換 互換 互換 互換 互換 互換 互換 互換
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(//EN の前に空白無し。これが正しい公開識別子 ?)
互換 互換 互換 互換 互換 互換 互換 互換 互換 互換
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN">
(//EN の前に空白あり。これは正しくない公開識別子 ?)
標準 標準 標準 標準 互換 互換 標準 標準 標準 互換
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 標準 標準 標準 標準 標準 標準 標準 標準 標準 標準
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
標準 標準 標準 互換 標準 標準 標準 標準 標準 標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 標準 標準 標準 標準 標準 標準 標準 標準 標準 標準
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
標準 標準 標準 互換 標準 標準 標準 標準 標準 標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 標準 標準 標準 標準 標準 標準 標準 標準 標準 標準
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
標準 標準 標準 互換 標準 標準 標準 標準 標準 標準