IE8でのみ縮小するとカラム落ちする原因と対策

IE6がエンディングを迎えようとしている昨今ですが、ふとこないだコーディングの最中に発見したバグ（？）をメモしておきます。

最近自分もクロスブラウザの最低ラインをIE7以上にしているんだけど、これはIE8でのみ起こった現象。

floatで問題なくレイアウト出来てるのに、IE8で表示を縮小するとカラム落ちするというマニアックなバグです。

縮小の落とし穴

まず、下のデモページをIE8で開き、縮小してみてください。

デモページ

.box{
 width:600px;
 background:#6D99C5;
}
.boxleft{
 width:300px;
 background:#C8D79F;
 float:left;
}
.boxright{
 width:298px;
 background:#D8B7DF;
 border:solid 1px #000;
 float:left;
}
.clear{clear:both;}

親のBOXは600px。そして左のBOXは300ｐｘで右がborderで2ｐｘ取るため、幅を298ｐｘにして合計300ｐｘになるようにしている。
もちろんfloatなので、後の段落で解除。普通はこれで大丈夫なのだが、ふとIE8で縮小すると、カラム落ちする現象が起きた。
それも拡大ではなく、ブラウザ縮小サイズ僅か95％にした時点で右のカラムが落ちる。これは親のBOXの横幅値よりもトータルでオーバーフローした為なのか。

色々試してみると、border値とwidth値のBOXはIE8で縮小した際にそれぞれ独立して縮小+レンダリングされるため、トータルのwidthが溢れてしまう、ということみたい。

普通にBOXのwidth値はちゃんと縮小されるが、borderの枠線値は縮小してもモニタ上の最小表現値の1pxが限界で、それ以下になることはない。
そしてタチが悪いことにIE8は、ブラウザごとズームすることで縮小拡大の処理が行われるので、縮小されたBOXのwidth値+border値（この場合1ｐｘ）で算出される。
よって値がおかしくなり溢れてしまう、ということなんだろうね。

しかもこのバグ、IETesterでは再現できない。純粋なIE8じゃないと解らないのだ。これは意外に落とし穴かもしれない。

カラム落ちしないための解決方法

少し面倒だけど、要はborderとfloatの指定を一緒にしなければ良いだけのこと。

デモページ

.box{
	width:600px;
	background:#6D99C5;
}
.boxleft{
	width:300px;
	background:#C8D79F;
	float:left;
}
.boxright{
	width:300px;
	background:#D8B7DF;
	float:left;
}
.boxright div{
	width:298px;
	border:solid 1px #000;
}
.clear{clear:both;}

デモページをIE8で開いて試して下さい。
右のBOXの中にborderを指定する用のBOXをネストしてやると、縮小してもカラム落ちしなくなる。

思わぬことだけど、まったくもって気付きにくいよね。