-
久しぶりにie6でレイアウトが崩れたので復習
2011年05月04日
-
IE6はCSSの解釈がおかしい
CSSの解釈がおかしいためレイアウトが崩れ
ボックス幅の解釈
div#box{ width:100px; border:1px solid black; padding:5px; }
ボックス全体の幅は112px→IE6では全体で100pxとなります。
【対策】widthとpadding、borderを一緒に使わない
div#box1{ width:100px; } div#box2{ border:1px solid black; padding:5px; }
例えば分けて指定
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; }
floatでボックスを回りこませてmarginで間隔を開けるときはdisplay:inline;をお忘れなく。
IE6のCSS対策の最終手段CSSハック
.sample{ width: 100px; _width : 120px; }
この場合、IE6以下のみ120pxとなり、他のブラウザでは100px
.sample{ width: 100px; } * html .sample{ width : 120px; }
こちらも同じで、IE6以下のみ120pxとなり、他のブラウザでは100px