TORAT
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
