スタイルシートの認識の違い
一部のInternetExplorerでは、CSSの『width、height、border、paddingプロパティ』において解釈の不具合があり、ボックスの表示サイズに既知のエラーがあります。
対象は以下のブラウザです。
- InternetExplorer 5.5以前のバージョン
- InternetExplorer 5.5以降のバージョンかつ互換モードで表示時
ブラウザの標準/互換モードの起動やDOCTYPEスイッチによるこれらの切り替えについては『ブラウザ別標準・互換モード対応表』をご覧ください。
具体的な不具合
ボックスモデルでwidth/heightプロパティを指定した場合、「width/heightプロパティは要素内容の縦横の長さを指定するもので、パディング（padding）とボーダー（border）を含まない」とCSSで定義されています。
従って、実際のボックスサイズは、width、padding、borderのサイズの合計が表示されることになります。
しかし、InternetExplorer5.5以前のバージョンや、それ以降の互換モード表示時では、この部分に解釈の間違いがあり、「width/heightプロパティがパディング（padding）とボーダー（border）を含む」という認識をもとにページを表示します。
このため、この不具合を知らずにこの条件下でページを作成してしまうと、InternetExplorerの標準モードやその他のブラウザでは、ボックスサイズが意図しているものと異なって表示されてしまいます。
以下の2つのサンプルを表示して、比べてみてください。
ただし、以下のサンプルを比較できるのはIEの全バージョンのみです。
IE以外のブラウザでは、どちらも正しく表示されます。
CSSサンプル
具体的な対処方法
これを回避する方法で最も簡単なものは、2つのボックスをうまく利用する方法です。
1つのボックスに、もう一方のボックスを入れ子にし、外側のボックスで『widthプロパティ』、内側のボックスで『パディング（padding）とボーダー（border）プロパティ』をそれぞれ指定します。
CSSサンプル
.box_outer
{
width:540px;
background-color:#ffdff9;
}
.box_inner
{
padding:10px;
border:10px solid #ff0000;
}
外側のボックスでwidthプロパティ、内側でpaddingとborderを指定する。
外側のwidthプロパティの値は、paddingとborderの長さを加えていることに注意。サンプル
