IE5 以前の誤解

概要

バージョン 5 以前の Internet Explorer には CSS の仕様を誤って解釈している点があります。 本来 width 、height プロパティの値は padding を含まない値であるのにも関わらず padding を含んだ値として解釈してしまうのです。

症状

実例を挙げましょう。 下に表示しているのは共に背景とボーダーを付けた width:200px 、height:50px の div 要素です。 両者の違いは padding の値だけとなりますが、 W3C の勧告に従っていれば2つのボックスは違う大きさ(下が大きい)に表示されるハズです。

padding:0px
padding:10px

W3C の勧告によると width プロパティや height プロパティが示すサイズには padding による領域を含みません。 それを明らかに示す例として例えば CSS2 の仕様 10.3.3 章

"margin-left"+"border-left-width"+"padding-left" +"width"+"padding-right"+"border-right-width" +"margin-right"
= width of containing block

という記述がある事などが挙げられます。

対処法

Internet Explorer もバージョン 6 でこれに対応しました。 DOCTYPE 宣言をキチンとしてやる事で Internet Explorer が内部で 解釈を「スイッチ」してくれるそうです。 ただ、どの DOCTYPE 宣言でも良いのかと言えばそうでもなく、 私が独自に調べた限り以下に挙げたもので行えば「スイッチ」されるようです (ちなみに IE のバージョンは 6.0.2800.1106 でした)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

広告による問題

しかしここで一つ問題が発生します。 どうやら Internet Explorer は DTD 宣言が HTML ファイルの先頭にないと 認識しないらしいのです。 これがどう問題になるのかというと、いくつかの無料ホームページサービスでは 広告表示用のスクリプトを html ファイルの先頭に書き込んでしまうので、 その結果ローカルでは大丈夫なのにアップロードすると 表示が崩れてしまう、といった事が起こります ( padding を使わなければ崩れませんが)。 例えば coolトクトク(共に何故かポップアップ広告タイプだけ) ではスクリプトが先頭に挿入されます。 ポップアップ広告サイトでは皆こうなのかと思って調べてみると、 isweb ではポップアップのスクリプトがちゃんと body 要素の次に挿入されていましたし、 あと調べたところで virtualave でも body の閉じタグ直前で ファイルの先頭ではありませんでした。 あまり知られていないのでしょうか。

Opera7では?

ところで Opera7 の新機能として「Internet Explorer 5 以前用に作られたサイトを 見る為に敢えて CSS の解釈を間違える」というものがあります。 要するに「Opera7 でも同じ問題が起こるかもしれない」と思ったわけなのですが、 幸い Opera7 は Internet Explorer のように HTML ファイルの先頭に スクリプトが挿入されても DOCTYPE 宣言をしっかりと認識してくれるようで 問題は起こりませんでした。

厳密な XHTML [2006年2月21日の追記]

XHTML を XML 規格に適合させるためには、ファイルの先頭に XML 宣言を書く必要があります。そして XHTML の DTD 宣言はその次の行に書くことになります。 この結果、同じ問題を起こります。

テスト用 XHTML ページを作ってみましたので、 Internet Explorer 6 以前の方は試してみるのも一興です。
テスト用 XHTML ページ
なお、Internet Explorer 7 のパブリックベータ版ではこの問題が解決しています。 リリースされたら、このページも用が無くなりますね・・・良い事です。