HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


ボックスモデルの解釈の不具合(IE)

スタイルシートの認識の違い

一部の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サンプル

.box
{
 width:500px;
 padding:10px;
 border:10px solid #ff0000;
 background-color:#ffdff9;
}

IEの標準モード、IE以外のブラウザで閲覧した場合 サンプル
IE5.5以前とIE5.5以降の互換モードで閲覧した場合 サンプル

具体的な対処方法

これを回避する方法で最も簡単なものは、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の長さを加えていることに注意。
サンプル

次のページへ >>