今回は私が苦労した Internet Explorer 7 のCSSの注意点についてまとめようと思います。
この記事は自分用の備忘録のような扱いとなりますが
もし同じことで困っている人がいたら少しでも参考になれば幸いです。
CSSの解釈方法を切り替える「標準モード／互換モード」
CSS（スタイルシート）の解釈はブラウザ毎に多少間違いがあります。
この解釈の間違いは新しいブラウザがリリースされる度に徐々に修正されています。
一見とても良いことに見えるのですが
CSSの解釈に修正，変更があったことで
前バージョンのCSS解釈に合わせて作ったホームページのレイアウトが崩れるかもしれません。
ホームページを作った人はどう思うでしょう？
「せっかく作ったのに新しいバージョンの解釈に合わせて作り直さなくちゃ、大変だ…（泣）」
これは困りますよね。
実はちゃんとこのような困った状況が起こらないように。
ブラウザには「互換モード」と「標準モード」の2種類が用意されています。
「互換モード」は前バージョンのCSS解釈で表示するモード
「標準モード」は新バージョンで変更，修正されたCSS解釈で表示するモードです。
IE7で同様に考えてみると
「互換モード」はIE6のCSS解釈（間違ったCSS解釈もそのまま）で表示するモード
「標準モード」はIE7のCSS解釈（間違ったCSS解釈は修正済）で表示するモードです。
ホームページの制作者はこのモードを自由に選択できるようになっています。
IE7のCSS解釈に基づいてホームページを作ったのに
「互換モード」で表示してしまっては何の意味もなくなってしまいます。
モードの選択を間違えないようにしましょう！
「標準モード／互換モード」を切り替えるDOCTYPE宣言
このモードの選択をするには「DOCTYPE宣言」というものを使います。
このDOCTYPE宣言は
HTMLタグ<html>よりも前、つまりHTMLの記述の1行目に書く必要があります。
DOCTYPE宣言には次の3種類があります。
HTML 4.01 Strict
IE7が「標準モード」で動作し、IE7から新しく実装された機能も使うことができます。
ただし、一部のタグやフレームを使用する事が出来ません。
「"http://www.w3.org/TR/html4/strict.dtd"」の記述を省略しても「標準モード」で動きます。
HTML 4.01 Transitional
IE7が「標準モード」で動作します。
HTML 4.01 Strictで使えなかったタグが使用できるようになりますがフレームは使うことができません。
「"http://www.w3.org/TR/html4/loose.dtd"」の記述を省略すると「互換モード」で動きます。
「互換モード」ではIE7で新しく実装されたCSSを使うことはできません。
HTML 4.01 Frameset
IE7が「標準モード」で動作します。
タグに加えHTML 4.01 Transitionalで使えなかったフレームも使用できるようになります。
「"http://www.w3.org/TR/html4/frameset.dtd"」の記述を省略すると「互換モード」で動きます。
HTML 4.01 Transitionalのときと同様に
「互換モード」ではIE7で新しく実装されたCSSを使うことはできません。
現在主流で使われているのは「HTML 4.01 Transitional」のようです。
また、DOCTYPE宣言自体の記述を省略した場合には「互換モード」になります。
気をつけて下さい！
この記事を作成するに当たり下記サイト様を参考にさせて頂きました、ありがとうございました。
→ !DOCTYPE スイッチ （W3G - World Wide Web Guide 様）
→ DOCTYPE スイッチについての検証とまとめと一覧表 （hxxk.jp 様）
→ DOCTYPE宣言 主要一覧と説明 （HTMLMAKER 様）
→ DOCTYPE宣言がないとIE7でも表示は古いまま （All About 様）
コメント