以前にもスタイルシートを初期化してIEとFireFoxでの表示を同じにする方法を紹介しましたが、、、、

今回はDOCTYPE宣言を変更してIEとFireFoxでの表示を同じにする方法の紹介です。

 

HTML 4.01 TransitionalでDOCTYPE宣言する場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
▲IEは互換モードになり、FireFoxなど標準モードでレンダリングするブラウザと表示が異なる

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
▲IEは標準モードでレンダリングを行う。FireFoxなどと同じ表示をしてくれる。

 

XHTML 1.0 TransitionalでDOCTYPE宣言する場合

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

どちらもIEは標準モードでレンダリングできた。FireFoxと同じ表示をしてくれる。

IEの標準モード・互換モード

以前HTMLについて色々学んだ際に、HTMLには様々な種類が存在している事を知りました。

具体的に書くと、「DOCTYPE宣言」というものをHTML内に書く事によってそれを行います。
「このページはXXXXと言うHTMLのルールに従って書かれていますよ」とIEやFireFoxなどのブラウザや、Yahoo!やGoogleなどの検索エンジンに知らせるのが目的です。

どんどん進化するWebサービスに対応するために、HTMLの規格は日々進化していて、今と数年前ではHTMLの書き方に若干の違いがあるのですが、Webページを作る人も、PCのブラウザも検索エンジンもその辺りは大変アバウトで、色んなルールをゴチャまぜにHTMLを記述しても、「おおむね正しく」表示してくれます。

この「おおむね正しく」がやっかいです。少し凝ったページを作ると、大抵の場合IEとFireFoxでの表示が異なってきます。

私の勉強不足というか、無知が災いしての事ですが、以前HTMLを学んだ際、その多くの資料を現在閲覧できる様々なWebページの記述をそのまま拝借し、活用すると云うスタイルをとりましたが、その際参考にした「HTML 4.01Transitional」でDOCTYPE宣言したWebページ全てが、IEで互換モード表示されるような作りになっていたのです。

IE6やIE7には、『昔マイクロソフトが我流で作っていたルールを表示させていた頃の名残りの互換モード 』がまだ残っており、DOCTYPE宣言をチョット間違うとIEとFireFoxでの微妙な表示の違いにエラク悩まされてしまう始末。

 

ちなみに

ここで「IEとFireFoxで同じ表示をしてくれている」 と書いていますが、それは以前書いたエントリのスタイルシートの初期化や、スタイルシート内の記述の順番、Paddingとmarginの記述の仕方の注意点、全てを守った上での事です。

DOCTYPE宣言だけ整えても表示は同じにならないかもしれません。