yusk -ユースク-

  • WordPress
  • Twitter
  • RSS
  • Facebook

201106-14

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

ie

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

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

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

縮小の落とし穴

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

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

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

しかもこのバグ、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をネストしてやると、縮小してもカラム落ちしなくなる。

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

コメントはありません。

コメントはありません。

トラックバック一覧

トラックバックURL

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">