IE6バグ

レイアウト上、margin:-20px; などと表記したいときもあるんだけど、IE6は言うことを聞いてくれない。。。
ネガティブマージンとは「マイナス値のマージン」のことですが、IE6ではこのマイナス値を読み取ってくれないためにこのようなことが起こる。

そのため、margin:-20px; とするなら、

.要素{
	margin-left:-20px;
        position:relative;
}

とするか、marginはdiv上でfloatプロパティを使うと値が2倍になってしまうバグもIE6にはあるので、

.要素{
	position:relative;
        left:-20px;
}

とするのが良いかも知れない。

ただ、親要素の位置などによっては、計算が異なる場合があるので、必ずしも同じ位置になるとは限らないと思うので、その場に応じて使いやすい方を使おう。

私は position 好きなので、後者ですけどね^^

IE6にはホント参りますね。。。。。

これは超ポピュラーなバグの一つですが、divでfloat指定したときmarginを使うとその値が倍になります。

コレの解決方法は、displayの標準値（block）を「inline」にすることで解決されます。

.要素{
	float: left;
	margin: 10px 5px 10px 0x;
	display: inline;
}

意外に忘れちゃうんですよね。あとでIE6で確認してびっくり(゜д゜)；

てことになるんですよ。

毎日コーディングばっかりやってればそんなことないのでしょうけど、、、ね。

なので私はエディタに「float と margin」が一緒に存在していた場合は、色を変えて直ぐに気づくように工夫してコーディングしています。

時々このやろ。って思ったりもしますが、ちゃんとCSSハックを使わないようにしてバグ修正していると、コードを短くすることが出来たり、たまーに勉強になるので、それはそれでプラス思考ってやつで乗り切るしかないね。

とんでもないバグ。
一応マイクロソフトはこの問題を修正するためにIEのみに反映されるCSSハックを用意してますが、こんなもののためにCSSを汚したくないので、IE6のことを考えれば透過画像はGIF形式で作るのが賢明ですね。

親要素がheightプロパティを理解しないため、親要素と position:absolute; を含む対象の子要素に「height:100％」を加える必要がある。

親要素{
	height: 100%;
}
子要素{
	position: absolute;
	height: 100%;
}