■IE6でfloat方向と同じ方向のmarginが倍になる

IE6において、floatした方向と同じ方向のmargin値が倍になってしまい

結果崩れる。。（バッカじゃねぇーの！IE）



【記述例】

#contents {
float: left;
width: 300px;
height: 200px;
margin: 5px 20px 5px 10px;
}

という場合、左（left）にfloatさせてるから

左マージンが10pxじゃなくて倍の20pxになっちゃう。

SafariやFirefoxではならない模様。



【解決方法1】

「display: inline;」を挿入。チョー簡単。

#contents {
float: left;
width: 300px;
height: 200px;
margin: 5px 20px 5px 10px;
display: inline;
}

※入れる場所（行）はお確かめ


【解決方法2】

2倍になるなら、最初から半分で指定してやれというハック。

#contents {
float: left;
width: 300px;
height: 200px;
_margin: 5px 20px 5px 5px;
margin: 5px 20px 5px 10px;
}

または、

* html #contents { /*IE6用のハック*/
float: left;
width: 300px;
height: 200px;
margin: 5px 20px 5px 5px; /*通常指定の1／2で指定*/
}

#contents { /*その他のブラウザ用*/
float: left;
width: 300px;
height: 200px;
margin: 5px 20px 5px 10px;
}

めんどくさ。