1コメントTweet共有/ブックマークIE6がエンディングを迎えようとしている昨今ですが、ふとこないだコーディングの最中に発見したバグ(?)をメモしておきます。最近自分もクロスブラウザの最低ラインをIE7以上にしているんだけど、これはIE8でのみ起こった現象。floatで問題なくレイアウト出来てるのに、IE8で表示を縮小するとカラム落ちするというマニアックなバグです。縮小の落とし穴まず、下のデモページをIE8で開き、縮小してみてください。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の指定を一緒にしなければ良いだけのこと。#000;}.clear{clear:both;}デモページをIE8で開いて試して下さい。右のBOXの中にborderを指定する用のBOXをネストしてやると、縮小してもカラム落ちしなくなる。思わぬことだけど、まったくもって気付きにくいよね。関連記事WordPressで会員認証ページを作るWEBでここを意識しておくといいかもね!WordPressでFacebookのいいね!ボタンを不具合無く設置する際のポイント外部CSS使用時の意外な落とし穴コメントはありません。コメントはありません。コメントをキャンセルメールアドレスが公開されることはありません。雑記スポンサードリンクこのサイトではゆうすけ個人のblogとして、普段の雑記や技術的なトピックス、デザイン的な何かを発信したり、考察していきたいと思います。