IE6でボーダーとパディングを指定したまわりで変なずれ

またまたひさしぶりに手こずったIE6のバグ。Safariでも同様の現象が起こってた気がするが、後で検証してみたら再現されず、よく分からん。

ボーダーとパディングを指定したボックスを入れ子にすると、その次に続く要素が左にずれる？発生条件がイマイチ分からない。
とりあえずボーダー、パディング、意味不明なずれ、というキーワードで困ったら、このパターン。と覚えておこう。と思ったけど忘れそうなのでメモ。

解決方法は、入れ子ボックスにborder-bottomも指定すること。背景色と同じ下ボーダーを設定すれば、Firefox以外では解決。

Firefoxでは見せたくない下ボーダーが見えてしまうので
html:not([lang*=""]) #area #inner {
border-bottom: none; /* Firefox対策 */
}
として、ボーダーを消す。（本来、Firefoxでは下ボーダーなくてもOKだから。）