標準モードと互換モードについて
最近のインターネットエクスプローラー7(IE7)は、HTMLやスタイルシートを仕様通りに解釈してだんだんうまく表示できるようになってきています。これを標準モードと言います。 しかし、IE6以前のブラウザでは、仕様とは違った解釈で表示してしまうことが多くあります。(バグもあります)
その為、急に最新のブラウザで仕様通りの正しい解釈をするようにすると、古い基準で作られた多くのページをうまく表示しない可能性があります。
この問題を避けるために用意されているのが、互換モードという 描画モード楽天 です。しかし、互換モードでは最新の機能を使うことができません。
描画モードによって表示が大きく異なります
私は、下記のようにホームページビルダーのデフォルト設定から自動的に書き出される、DOCTYPE宣言(URLが無いもの)を使用していました。そうすると表示が互換モードになり、CSSでmax-widthを設定していても、IE7ではちゃんと表示してくれませんでした。なかなかその理由がわからなかったのですが、やっと標準モードと互換モードの違いだとわかりました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
標準モードとは
標準モードではブラウザがHTML文法をほぼ正しく解釈して表示するし、文法ミスは無視して表示します。また古いブラウザでの不具合は少しずつ改良されています。
互換モードとは
古いバージョンのブラウザに合うような表示(古いバージョンと互換)をしますので、古いバージョンで間違って解釈していた所は、間誤ったままに表示します。文法ミスは適当に解釈して表示します。IE7での新しい機能は使えません。
描画モードは、「DOCTYPE宣言」で決まります
HTMLには複数のバージョンがありますので、バージョンによって、定義されているタグの種類や仕様などが異なります。だからHTMLの文法を正しく解釈するためには、ホームページがどのバージョンのHTMLで書かれたものなのかを指定してやる必要があります。 その目的に、HTMLファイルの先頭でDOCTYPE宣言をしています。
標準モードでDOCTYPE宣言を書くには
記述したいHTMLのバージョンが判明している時は、そのバージョンのDOCTYPE宣言を書きます。もし、よくわからない時は、下記のHTML 4.01 TransitionalのDOCTYPE宣言を書いておきましょう。次のDOCTYPE宣言は、どのブラウザでも標準モードになります。
HTML 4.01 Strict
HTML 4.01 Strictは、HTML4.01で定義されているタグ等を厳格に適用したものです。つまり、FONTタグで文字サイズや色を指定したり、Bタグ<B>~</B>で太字にすることはできません。文字の修飾には基本的にCSS(スタイルシート)を使います。また、「"http://www.w3.org/TR/html4/strict.dtd"」の記述を省略しても「標準モード」で動きます。フレームを使うことができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
HTML 4.01 Transitionalは、HTML4.01で定義されているタグ等の中で推奨されていないものでもちゃんと表示させるものです。とりあえずよくわからない場合はこれにしておきましょう。標準モードになります。フレームを使うことができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
HTML 4.01 Framesetは、HTML4.01で定義されているタグ等の中で推奨されていないものでもちゃんと表示させるものです。標準モードになります。フレームが使用できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0~1.1
XHTMLのDOCTYPE宣言ならバージョンが違っても標準モードで描画されます。次の例はXHTML 1.0 Transitionalの場合です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
互換モードにするには
互換モードにするにはDOCTYPE宣言を書かないか、上記のStrict以外でHTML 4.01のDOCTYPE宣言からURLを除きます。
DOCTYPEより前にコメントを書くとIEで互換モードになります
WordPress の私のブログがIEだけでMax-width の動作がおかしいのに気がつきました。つまり、IE7,IE8でMax-width が働いていないのです。Firefox と Opera は問題ありませんでした。
スタイルシートのmax-width 付近の記述が間違っているのかと色々やってみましたが全く変わりません。私のホームページの方はうまく表示されているので、スタイルシートの該当部分をコピーしてみましたがそれでも変わりません。
ブラウザでソースを表示させてみて、あるいは先頭のコメントかなと思い、これを削除したらあっさりと直りました。
<!-- begin header -->
ネットで検索してみると次のような記述がありました。
XML 宣言の後に HTML コメントが挿入されている場合、Internet Explorer 8 標準モードとして表示されない
私のWordPress の場合は次のようにXML 宣言の前なのでこの記述は間違いだと思います。XHTML1.0 Transitional 標準モードに設定しています。
<!-- begin header --> <?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より前にコメントを書くとIEで互換モード(Quirks モード)になる」のだと思います。何時間もこの問題にはまってしまいました。IEはなんとかして欲しいですね。