ブラウザの2つの表示モード

一般的なブラウザには、「標準モード」と「互換モード」の2つの表示形式があることを知っておきましょう。標準モードは、ルールに沿った仕様通りの表示を行います。逆に、互換モードでは、ある程度の文法ミスも適当に解釈して補ってくれます。

「互換モード」は一見使いやすそうですが、仕様通りソースを記述しても正確に表示してくれない困った問題があります。よって、なるべく「標準モード」にしたいところです。ちなみに、この2種類の表示モードのことを「DOCTYPEスイッチ」と言います。

この表示モードはDOCTYPE宣言によって(具体的には、それが書かれてあるか無いかで)、自動で判断されます。しかし、IEはDOCTYPE宣言の前に何か文書が記述されていると、否応なしに「互換モード」にされてしまうバグがあります。

バージョンとDTDIE6.0FirefoxOpera8Mac版IE5.0
無記入 互換モード 互換モード 互換モード 互換モード
HTML 4.01
Strict DTD
標準モード 標準モード 標準モード 標準モード
HTML 4.01
Transitional DTD
標準モード 標準モード 標準モード 標準モード
(XML宣言なし)
XHTML 4.01
Strict DTD
標準モード 標準モード 標準モード 標準モード
(XML宣言あり)
XHTML 4.01
Strict DTD
互換モード 標準モード 標準モード 標準モード
(XML宣言なし)
XHTML 4.01
Transitional DTD
標準モード 標準モード 標準モード 標準モード
(XML宣言あり)
XHTML 4.01
Transitional DTD
互換モード 標準モード 標準モード 標準モード

合わせてDOCTYPE宣言の書き方も下の表に記します。誤って単語を間違えたりしてしまっても「互換モード」になってしまいますから、正確に記述しましょう。

バージョンとDTDDOCTYPE宣言の表記
HTML 4.01
Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01
Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
Strict DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0
Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0
Frameset DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Frameset DTDはTransitonal DTDと同じ表示モード。Netscape、SafariはFirefoxと同じ表示モード。
表示モードの確認方法
DOCTYPE宣言の有無で表示モードを確認する以外にも、どちらの表示モードになっているか知る方法があります。それは、確認したいページを開いて、アドレスバー(URLが表示されているところ)に、javascript:alert(document.compatMode);と入力するやり方です。「CSS1Compat」というウィンドウメッセージが表示されたら、そのページは「標準モード」。「BackCompat」のウィンドウが表示されたなら「互換モード」になっています。