IE と Firefox でボックスの幅が異なってしまうという問題の原因と解決策
問題
Web サイトを作っている時に Firefox と IE を使って表示確認をすると、何故か Firefox のボックスの幅のほうが IE よりも大きくなってしまっていた、という問題に直面した方は多いのではないでしょうか？ 今回はこの問題を扱います。
具体的には、下図のようなものです。 同じページを表示しているのですが、Firefox と IE ではボックスの幅が違っています。
![[Firefox 3 での表示サンプル]](docswitch_sample1_firefox.png)
![[IE8 での表示サンプル]](docswitch_sample1_ie.png)
原因
上の例のように Firefox と IE でボックスのサイズが異なるのは、Firefox は 「標準モード」 でレンダリングし、IE は 「互換モード」 でレンダリングしているのが原因です。
上の例では、あるボックスに CSS の width プロパティとして 300px を指定し、また幅 40px の border も付けています。 Firefox の表示を見ると、border を含めない中身の幅が 300px になっている一方、IE では border を含めた幅が 300px となっています。 どちらの表示が正しいのかというと、Firefox の表示の方が正しい表示です。
IE が正しくない表示をしているのは、上で述べた 「互換モード」 でレンダリングしているためです。 「互換モード」 というのは、古いブラウザ (IE 5 以前) でのレンダリングと互換性を保つためのモードで、IE に限らず最近のブラウザの多くは、「標準モード」 と 「互換モード」 という 2 つ (もしくはそれ以上) のレンダリングモードを持っています。 「互換モード」 でレンダリングするか 「標準モード」 でレンダリングするかは、ブラウザが各ページのソースコードを見て自動的に判断します。
解決策
今回の例では、IE に 「互換モード」 でレンダリングするように判断されてしまったためこのような問題が起きました。 これを解決するには、IE でも 「標準モード」 でレンダリングされるようにソースコードを変更すればオーケーです。
具体的には、DOCTYPE 宣言を書き換えます。 (または書いていないのであれば書き加える。) 各ブラウザは、「標準モード」 でレンダリングするか 「互換モード」 でレンダリングするかを、そのページの DOCTYPE 宣言を見て判断します。 例えば、DOCTYPE 宣言がないページであれば Firefox でも IE でも 「互換モード」 でレンダリングされます。 また基本的には、正しく DOCTYPE 宣言をしているページであれば 「標準モード」 でレンダリングされます。
ただし、それぞれのブラウザによって 「互換モード」 にするか 「標準モード」 にするかの判断基準はバラバラで、場合によっては今回の例のように Firefox では 「標準モード」、IE では 「互換モード」 となってしまう場合もあります。
そうなってしまわないように、下記に挙げる Firefox でも IE でも 「標準モード」 になる DOCTYPE 宣言の書き方をしてください。
| (X)HTML のバージョン | DOCTYPE 宣言の書き方 | 備考 |
|---|---|---|
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
システム識別子は無くても良い |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
システム識別子無しだと IE で 「互換モード」 になってしまう |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
XML 宣言を書くと IE 6 で 「互換モード」 になる |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
XML 宣言を書くと IE 6 で 「互換モード」 になる |
今回の例では、HTML 4.01 Transitional で書いていたのですが、DOCTYPE 宣言にシステム識別子を書いていなかったため IE で 「互換モード」 になっていたのでした。 表に書いてあるとおりに DOCTYPE 宣言を書き直すと、IE でも Firefox と同じように表示されるようになりました。
![[IE8 での表示サンプル]](docswitch_sample2_ie.png)
備考
- 「標準モード」 や 「互換モード」 のことを、ブラウザの 「レンダリングモード」 という。
- 「標準モード」 は 「標準準拠モード」 とも。 英語では "Standard mode"。
- 「互換モード」 は 「後方互換モード」 とも。 英語は "Quirks mode"。
- 各ブラウザが DOCTYPE 宣言を見てレンダリングモードを切り替えることから、切り替えの機構を 「!DOCTYPE スイッチ」 (!DOCTYPE Switching) と呼ぶ。
- 全然関係ないけど、サンプルに使用した背景画像は こちら のものを使わせてもらいました。 ありがとうございます。
参考文献
参考になるページを挙げておきます。 このページでは簡単な説明しかしていませんが、より詳しく知りたい方は下記参照ください。