バージョン 5 以前の Internet Explorer には CSS の仕様を誤って解釈している点があります。 本来 width 、height プロパティの値は padding を含まない値であるのにも関わらず padding を含んだ値として解釈してしまうのです。
実例を挙げましょう。 下に表示しているのは共に背景とボーダーを付けた width:200px 、height:50px の div 要素です。 両者の違いは padding の値だけとなりますが、 W3C の勧告に従っていれば2つのボックスは違う大きさ(下が大きい)に表示されるハズです。
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 でした)。
しかしここで一つ問題が発生します。 どうやら Internet Explorer は DTD 宣言が HTML ファイルの先頭にないと 認識しないらしいのです。 これがどう問題になるのかというと、いくつかの無料ホームページサービスでは 広告表示用のスクリプトを html ファイルの先頭に書き込んでしまうので、 その結果ローカルでは大丈夫なのにアップロードすると 表示が崩れてしまう、といった事が起こります ( padding を使わなければ崩れませんが)。 例えば cool 、 トクトク(共に何故かポップアップ広告タイプだけ) ではスクリプトが先頭に挿入されます。 ポップアップ広告サイトでは皆こうなのかと思って調べてみると、 isweb ではポップアップのスクリプトがちゃんと body 要素の次に挿入されていましたし、 あと調べたところで virtualave でも body の閉じタグ直前で ファイルの先頭ではありませんでした。 あまり知られていないのでしょうか。
ところで Opera7 の新機能として「Internet Explorer 5 以前用に作られたサイトを 見る為に敢えて CSS の解釈を間違える」というものがあります。 要するに「Opera7 でも同じ問題が起こるかもしれない」と思ったわけなのですが、 幸い Opera7 は Internet Explorer のように HTML ファイルの先頭に スクリプトが挿入されても DOCTYPE 宣言をしっかりと認識してくれるようで 問題は起こりませんでした。
XHTML を XML 規格に適合させるためには、ファイルの先頭に XML 宣言を書く必要があります。そして XHTML の DTD 宣言はその次の行に書くことになります。 この結果、同じ問題を起こります。
テスト用 XHTML ページを作ってみましたので、
Internet Explorer 6 以前の方は試してみるのも一興です。
テスト用 XHTML ページ
なお、Internet Explorer 7 のパブリックベータ版ではこの問題が解決しています。
リリースされたら、このページも用が無くなりますね・・・良い事です。