IE8における拡大縮小バグ

CSS2009年11月9日

先日リリースされたIE8で、拡大縮小した際にカラム落ちする場合があるようです。(文字ではなくズームによる拡大縮小)
例えば、下記のような記述でスタイルを定義した場合に発生するようです。

ul{
width:600px;
margin:10px;
border:1px blue solid;
}

ul li{
width:194px;
height:194px;
margin:2px;
border:1px red solid;
list-style-type:none;
float:left;
display:inline;
}

IE8のズームは拡大縮小のみではなく、再レンダリングが行われており、widthとmarginもしくはborderを含んだ要素の場合、拡大縮小の際の計算値が変わってくるらしいです。
やっかいなことにスタンドアローンではこのバグが発生しないらしく、オリジナルのIE8でのみ発生するようです。まだまだこれからもIEは油断できません。

• CSSを自動でIE6に対応させるオンラインサービス「ie6fixer」
• CSSで垂直方向の中央表示を実装

この記事を読んでいる方にオススメの記事

• CSS強制的にCSSを適用させる!importantハック
• CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSSテキストの両端を均等にそろえるCSS
• CSSfloatを使わずに、横並びのリストを実装
• CSS画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。