比較的新しいブラウザには、HTMLやCSSの記述をどのように画面表示するかを決めるレンダリングモードが、
大きく分けて２種類備わっています。
レンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、
DOCTYPE宣言の記述のしかたによって切り替わります。
標準モード（Standard）は、CSSなどの指定を仕様通りに解釈して表示するモードで、
互換モード（Quirks）は、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、
あえて標準仕様とは異なる解釈で表示するモードのことです。ブラウザによってはさらにその中間モード（Almost Standard）があります。
互換モードでウェブページが表示される場合、
CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。 ブラウザの種類とバージョンによっては、例えば以下の点などで表示の違いが起こることがあります。
表示モードが切り替わるブラウザのバージョンは以下の通りです。
HTML文書内のDOCTYPE宣言の記述のしかたと各ブラウザの表示モードの関係については、以下の表を参考にしてください。
| DTDの 種類 |
DTDの 記述 |
Win IE7以上 |
Win IE6 |
Mac IE |
Fx | O | N | S |
|---|---|---|---|---|---|---|---|---|
|
– |
なし | Q | Q | Q | Q | Q | Q | Q |
| HTML4.01 Strict |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> | S | S | Q | S | S | S | S |
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “https://www.w3.org/TR/html4/strict.dtd”> | S | S | S | S | S | S | S | |
| HTML4.01 Transitional |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> | Q | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “https://www.w3.org/TR/html4/loose.dtd”> | S | S | S | S | S | S | S | |
| HTML4.01 Frameset |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”> | Q | Q | Q | Q | Q | Q | Q |
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “https://www.w3.org/TR/html4/frameset.dtd”> | S | S | S | S | S | S | S | |
| XHTML1.0 Strict |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> | S | S | S | S | S | S | S |
| <?xml version=”1.0″ encoding=”文字コード”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
S | Q | S | S | S | S | S | |
| XHTML1.0 Transitional |
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> | S | S | S | S | S | S | S |
| <?xml version=”1.0″ encoding=”文字コード”?> <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
S | Q | S | S | S | S | S | |
| XHTML1.0 Frameset |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> | S | S | S | S | S | S | S |
|
<?xml version=”1.0″ encoding=”文字コード”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
S | Q | S | S | S | S | S |
上記の表で、Internet Explorer 6でXHTML文書が互換モードになるのはブラウザのバグです。
XHTML文書を作成する際には、文書の先頭でXML宣言をすることが推奨されていますが、
IE6では1行目がDOCTYPE宣言から始まっていないと互換モードで表示されてしまいます。
<?xml version=”1.0” encoding=”Shift_JIS“?>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>
<head>
<title>XHTML文書</title>
</head>
<body>
</body>
</html>
XHTML文書では、文書の文字コードがUTF-8またはUTF-16の場合にはXML宣言を省略することが可能です。
そのため、文字コードをUTF-8またはUTF-16にして作成すれば、XML宣言を省略してIE6の互換表示を回避することができます。
IE8からは標準モードの種類が指定できるようになっています。
原則としてDOCTYPE宣言の記述の仕方で標準モードと互換モードが切り替わる点はIE7と同様ですが、
IE8にはIE8標準モードと互換モードのほかに、IE7標準モードが用意されています。
これは、IE8がIE7よりも厳密に標準仕様を解釈するようになっているためです。
例えば、layout-grid系のプロパティはIEの独自仕様ですが、IE7では標準モードでも動作していました。
これが、IE8標準モードでは動作しなくなっています。
この場合、IE7標準モードを指定することで、互換モードにすることなくこれらのプロパティを動作させることができます。
このように、IE8では標準仕様への実装の度合いに応じて、より詳細に表示モードを指定し分けることができるようになっています。
IE8以降でIE7標準モードを指定するには、meta要素で以下のように記述します。
meta要素による指定は、DOCTYPE宣言による指定よりも優先されます。
<meta http-equiv=”X-UA-Compatible” content=”IE=7″>
他にもIE=7の部分を指定し分けることで、表示モードを切り替えることができます。
尚、IE8には表示モード切り替えボタンが付いており、ユーザー側で表示モードを切り替えることができるようになっていますが、
meta要素で表示モードを指定すると、このボタンが表示されなくなります。
下は、
<meta http-equiv=”X-UA-Compatible” content=”IE=7″>
を指定している場合の画面です。
| <前へ | 記事一覧へ | 次へ> |
