IE6でレイアウトが崩れてしまったときの対策

IE6のCSSの解釈がおかしいためレイアウトが崩れてしまったときの対策。

ボックス幅の解釈

div#box{
	width:100px;
	border:1px solid black;
	padding:5px;
}

このようにCSSを指定した場合、最新ブラウザではボックス全体の幅は112pxとなりますが、IE6では全体で100pxとなります。

【対策】　widthとpadding、borderを一緒に使わない

div#box1{
	width:100px;
}
div#box2{
	border:1px solid black;
	padding:5px;
}

このように分けて指定し、box1の中にbox2が入るようにすると解決です。

floatで回り込むとmarginが2倍に

div#box{
	float:right;
	margin-right:20px;
}

このように指定した場合、通常は20pxですが、IE6の場合40pxとなります。

【対策】　marginとfloatを使うときはdisplay:inline;を忘れずに

div#box{
	float:right;
	margin-right:20px;
	display:inline;
}

IE6の場合margin-leftが40pxになりますが、display:inline;を追加すると通常通り20pxとなります。

floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。

IE6のCSS対策の最終手段としてCSSハック

どうしてもというときはCSSを使いましょう。

.sample{
	width: 100px;
	_width : 120px;
}

この場合、IE6以下のみ120pxとなり、他のブラウザでは100pxとなります。

.sample{
	width: 100px;
}
* html .sample{
	width : 120px;
}

こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100pxとなります。