自分ではコーディングに関しては、ブラウザのバグはひと通り経験したと思ってました。けどまだまだ甘かった。IE6にはまだこんなバグがあったとは。。。


ご覧の通り、2つ目以降のボックス内の要素が、どんどん左にズレていきます。
(「どんどん」ズレるというのがすごい。そのうち見えなくなるからね。)
これは、ブロック要素を入れ子(2重)にして、border-leftとpading-bottomを外側のブロックにしていしたときに、上記のような症状が起きてしまいます。

ソースはこんな感じ。

<div class="redBox">
  <p>
    赤線が入ったボックスです。
  </p>
</div>
<div class="blueBox">
  <p>
    青線が入ったボックスです。
  </p>
</div>
<div class="greenBox">
  <p>
    緑線が入ったボックスです。
  </p>
</div>

div.redBox {
	border-left: 10px solid #ff0000;
	margin-bottom: 10px;
	padding-bottom: 10px;
	background: #eeeeee;
}
div.blueBox {
	border-left: 10px solid #0000ff;
	margin-bottom: 10px;
	padding-bottom: 10px;
	background: #eeeeee;
}
div.greenBox {
	border-left: 10px solid #00ff00;
	margin-bottom: 10px;
	padding-bottom: 10px;
	background: #eeeeee;
}

これを解決するには、

1.border-leftとpadding-bottomの組み合わせをやめちゃう。
2.または、外側のブロックに横幅を指定する。

の2通りの方法が現実的ではないかと思います。
border-left以外のborder-topを指定しても解決しますが、これではデザインを再現できないですし、無意味でしょう。

このミニマムズブログでIE6でのアクセスは全体の3%くらい。そろそろいいかな。