IE6、IE7、IE8、Firefox、Operaで標準準拠モードを使う方法

標準準拠とCSS、ブラウザ間の問題

IE6によるCSSの解釈ミス 標準準拠モードと互換モード 表示モードを指定する識別子 標準準拠モードを使うためのまとめ

CSSを扱う上でブラウザの違いによる解釈の違いは、Web制作者を悩ませる原因となっている。
私もWebサイトを作りながら何度、IEに不満を抱いたことか…

Internet Explorer による独自拡張

IEは、独自にCSSを拡張して半透明効果などのフィルタ効果を使えるようにしたりしてきた。
『ボックスの幅と高さを算出する時、パッティングやボーダーのサイズは、除外される』という本来の動作を無視して
--

IE6によるCSSの解釈ミス

IE6では、『パディングとボーダーのサイズも含めて』て幅と高さを算出してしまうバグがある。
次のサンプルは、IE6で見ると表示がずれてしまう。
FirefoxやIE7、IE8では、横の青ラインと赤ラインがほぼ揃った大きさになる。
『横幅 150ピクセル、左のパディング（内余白） 30ピクセル、四方それぞれのボーダー10ピクセル』にしている。
ボーダーが左右にそれぞれあるので左右のボーダーは、合わせて20ピクセルになる。

150 + 30 + (10 * 2) = 200ピクセル

テスト

横幅 200ピクセル

IE6で表示させた場合	FirefoxやIE8で表示させた場合

CSS2の仕様通りの動作ならば、width(横幅)やheight(縦幅)は、
内容領域にのみ適応されるのが正しいとされる。

しかしIE6など一部のブラウザは、パディングとボーダーを含めて幅を算出してしまう。

そのため、CSSレイアウトを行う際のブラウザによって表示ずれが起きる。
このようにIE6には、CSSの解釈を正しくできない問題が多数存在しているが、IE6ユーザーは、多い。
IE7が出て一年以上が経過しているにも関わらず、IE6ユーザーが多半数を占めることから無視できないので悩ましい。

標準準拠モードと互換モード

標準準拠とは、本来の仕様に基づいた動作をするということである。
つまり、W3Cが定義してる仕様に基づいて処理を行うことから正しいHTMLやCSSは、標準準拠モードを使用することが望ましいとされている。

一方、互換モードとは 、ブラウザの旧バージョンに対応するためのものだ。
IE6でうまく表示できるように作られたページがIE7、IE8で正しく表示できなくなるという問題を考慮して、
IE7でもIE8でもIE6と同じようにレンダリングすることができる。
ちなみに互換モードは、Quirksモードとも呼ばれている。

表示モードを指定する識別子

ブラウザに標準モード(ブラウザ独自の表示)、互換モード(旧バージョンと同じように表示)、標準準拠モード(W3C仕様に基づく表示)
-

DOCTYPEスイッチ

そのHTMLまたは、XHTMLがどの文章定義を利用して作成されたものなのか、ブラウザに知らしめるのが、
DOCTYPEスイッチです。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">

『XHTML 1.0 Transitional』と呼ばれる文章定義に基づいてWebページをXHTMLが書かれている。
このスイッチを指定しない場合は、互換モードになり、指定した場合は、標準準拠モードとなるのです。
しかし、ブラウザによって解釈が若干違うので注意が必要です。

代表的なDOCTYPE

HTML 4.01 Strict DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML 4.01 Transitional DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTML 4.01 Transitional DTD (フレームセット用)	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
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 DTD (フレームセット用)	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 Strict DTD	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML Basic 1.0 DTD	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

Strict は、厳格な文章であることを意味すると思って間違いありません。
少しでも安全でない書き方をするとエラーになります。

Transitionalは、特に問題は、無いが推奨しない書式が明示されています。

XHTMLのStrictを使用することでほぼ全てのブラウザが標準準拠モードを使用することになります。
但しあまりにも厳格過ぎるのでTransitionalを使うのが良いだろう。

システム演算子

システム演算子は、文法の定義(DTD)の在処を示すものでXHTMLでは、必須 になっている。
IEは、このシステム演算子があれば、標準準拠モード、無ければ、互換モードとして取り扱う。

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

* 太字で示している部分がシステム演算子。 -

XML宣言

近年、HTMLからXHTMLへ以降が進んでいる。
従来のHTMLよりメンテナンスしやすく、ブラウザも基本的には、標準準拠モードで表示しようとするので
扱いやすいのが特徴だ。またXMLの柔軟さを保ち今後の拡張も行いやすい。
HTMLに比べて終了タグを省略できない仕様なので表示速度がHTMLよりも若干高速だ。

XML宣言

この文章は、XMLで書かれていることを明示することがW3Cによって強く推奨されている。
ファイルの一番上、基本的には、１行目に記入することでXMLであることを宣言できる。

XML宣言の例

<?xml version="1.0" encoding="Shift_JIS"?>

XML宣言があると標準準拠モードで無くなるIE6のバグ

XML宣言をすることがW3Cによって強く求められているのでXML宣言を入れたらIE6で表示がおかしくなることがある。
何故かIE6は、XML宣言があると互換モードで描画してしまうバグが潜んでいるのが原因だ。
厳密には、DOCTYPEを一行目に書かないと互換モードになってしまうのでそれより前に書く必要がある、
XML宣言でバグが発生する原因となっている。(DOCTYPEより前に特定の文字があると互換モードになる)

解決方法：IE6でも標準準拠モードにしたいならXML宣言を外す

IE6でも標準準拠モードにするならば、XML宣言を書かなければ良い。
W3Cによっては、推奨されないとはいえ、IE6のシェア率が一番高い現状を考えるとやむ得ないことだろう。

PHPでIE6のみXML宣言を出力しないようにする。

正しい文法で書きたい人にとって、XML宣言を除外するのは、何とも気持ち悪いものだ。
そこPHPが使えるサーバーならば、IE6のみXML宣言を除外するように仕向けてやれば良い。

$HTTP_USER_AGENT = getenv("HTTP_USER_AGENT");
if (!ereg("MSIE 6", $HTTP_USER_AGENT)) {
     echo '';
}

標準準拠モードを使うためのまとめ

いったいどうすれば、多くのブラウザでXHTMLを正しく表示されるのか、下記にまとめてみた。
但しこれは、一例なのである一つの手段と捉えて頂きたい。

DOCTYPE	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XML宣言	<?xml version="1.0" encoding="文字コード"?> IE6では、XML宣言があるとバグで互換モードになるので除外する。
IE7 標準準拠モード	<meta http-equiv="X-UA-Compatible" content="IE=7">
IE8 標準準拠モード	<meta http-equiv="X-UA-Compatible" content="IE=8">
IE7/IE8 標準準拠モード	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=8">

InternetExplorer(IE8)のデフォルトは、後方互換モード

IE8は、デフォルトで標準準拠モードにしようとする動きからIEの過去のバージョンに合わせる、後方互換モードに切り替わっている。
多くのWebページがIE6に調整されていることからIE8で標準準拠モードをデフォルトにした際に問題があるとみたのだろう。 IE8で標準準拠モードを使うには、metaタグで明示しなければ、ならない。
これをレンダリングモードの指定という。

HTTPヘッダーに埋め込む

PHPやPerlが使えれば、HTTPヘッダーに指定するのも有効だ。何よりHTMLがスマートになる。
下記は、HTTPヘッダーをPHPで出力する例で一番最初に出力しなければならない。

header('ヘッダー名: 値');

だめな例 次の例は、HTTPヘッダーより前にechoやprintを使ってるのでNG。

echo "HalloWorld";
print "Hallo";
header('Content-Type: text/html; charset=shift_jis');

よく使いそうなヘッダー

header('Content-Type: text/html; charset=shift_jis');  //ページの文字コードとコンテンツの種類
header('X-UA-Compatible: IE=7; IE8');                  // IE7 IE8で標準準拠モードを使う
header('Cache-Control: no-cache');                     // ページをキャッシュさせない
header('Pragma: no-cache');                            // ページをキャッシュさせない
header('expires: Sun, 10 Jan 1990 01:01:01 GMT');      // ページのキャッシュの有効期限
header('Content-Script-Type: text/javascript');        // スクリプトの種類
header('Content-Style-Type: text/css');                // スタイルシートの種類

同じことをMETAタグで指定した場合

<!-- IE7 IE8で標準準拠モードを使う -->
<meta http-equiv="X-UA-Compatible" content="IE=7; IE8"/>
<!-- ページをキャッシュさせない -->
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache" />
<!-- ページのキャッシュの有効期限 -->
<meta http-equiv="expires" content="Sun, 10 Jan 1990 01:01:01 GMT" />
<!-- スクリプトの種類 -->

<meta http-equiv="CONTENT-SCRIPT-TYPE" content="text/javascript"/>
<!-- スタイルシートの種類 -->
<meta http-equiv="Content-Style-Type" content="text/css" />

ほとんどのブラウザで標準準拠モードを使うための最終まとめ

XHTML 1.0 Transitionalを用いた文章でIE6、IE7、IE8、Firefox、Operaで標準準拠モードを使用する例です。

XHTML(PHPが使える場合)

IE6では、XML宣言を出力しないようにしている。

';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

XHTML(PHPが使えない場合)

IE6の為に仕方なく、XML宣言を外すしかない。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
       <meta http-equiv="X-UA-Compatible"
content="IE=7; IE8"/>
</head>

前のドキュメント：スタイルシートの高度な書き方

印刷用ページとして表示しています。
このページを印刷するには、ここをクリックしてください。
通常の表示に戻るには、ブラウザの更新ボタンかF5キーを押してください。

このドキュメントへのトラックバック

コメント

名前

Webサイト、ブログのURL

投稿する内容をよく確認して送信して下さい。

コメントは、まだありません。

トラックバック

トラックバックURL

トラックバックURLと内容をよく確認して送信して下さい。

トラックバックは、まだありません。

HTML lint

CSS Validation Service ページを編集アクセス情報