サイトの css ファイルをいじっていると、どうもIE6 (or sooner) だけ表示が崩れるという問題が頻繁に発生する。
やっと理由と対策案がわかった。
試してみる。
IE6 はボックスの解釈を誤ってるらしく、特に padding まわりが壊滅だそうだ。
そこで、余白の調整をするときは、padding を使うのではなくて margin を使うのがいいそうだ。
参考: IEでだけレイアウトが崩れる場合はpaddingを探す
Movable Typeのデフォルトのテンプレートでは、無意味に2つのボックスが重なっていたりして冗長だなぁと思っていたのだが、理由があったのだ。
2つのボックス用意して内側のボックスのマージンをいじれば、1つのボックスでパディングをいじったのと同じことになる。