WORK NOTE BLOG

IE6.0では標準モードか互換モードかによって、CSSで指定された幅の認識の仕方が異なる。

下記のように幅500ピクセル、余白とボーダーがともに10ピクセルのボックスを指定したとすると、

.box {
 width: 500px;
 border: 2px solid #999999;
 padding: 5px;
}

●互換モードの場合（IE5.xなどとの後方互換）

ボックスの領域中にボーダーや余白の幅が含まれてしまう。

 
●標準モード（IE6など）

ボックスの領域は絶対的に500ピクセル確保され、ボーダーや余白の幅は、ボックス領域には含まれない。

  

●IE5.xにのみ別の指定をする

上記の例でいくと14ピクセルもの差が生まれることになる。従って、どちらのモードでも実際の領域の幅を同じにするには、部分的にIE5.x以前のブラウザに対して別の指定をしてやる必要がある。

コンテンツが入る領域幅をを500pxとしたい（標準モードに合わせたい）のなら

.box {
 width: 514;　
 border: 2px solid #999999;
 padding: 5px;
}

のように、widthにborderとpaddingの幅を足しておく。

これらの設定をIE5.x用のCSSファイルにまとめておき、IE5.xにのみ適用するようにしておく。

具体的には、共通のCSSがcommon.css、IE5.xにのみ適用させるCSSをie5win.cssとしたとする。

import.cssを作り、そこに次のように記述する。

@import “common.css”;

@media tty {
 i{content:”\”;/*” “*/}} @import ‘ie5xwin.css’; /*”;}
}/* */

こうしておくことで、IE5.xにのみ違う指定を行うことができる。