IE + CSS「border-leftとpadding-bottom」の謎は、まだ解決できていない

さて、どうしたら解決できるでしょうか。以下に考えられる解決策をいくつか挙げておきます。もちろん、他にもあるかもしれません。とっておきの方法がありましたらご一報ください。

引用元では3つの解決策が挙げられているが、解決できていない…というか、新たな謎に出会うことになるはずだ。たぶん。
(なお、私には建設的な代案なんか一切ない。)
問題が起こりやすくなるように、少しだけスタイルシートを変更する。capsクラス以外はそのまま。

.caps{ /*見やすさのため。バグには関係ありません */
  border: 1px solid blue;
  margin: 0;
  margin-bottom: 20em; /* ←追加 */
}

ディスプレイの表示は予想どおりになるはずだが、印刷プレビューするとどうなるだろうか。まずは (1) border-leftpadding-bottomというコンビネーションを避ける場合。

次に (2) border-leftだけでなく、border-bottomを与える場合。

(1) と (2) のいずれもずれてしまった (ずれ方はちょっと違うけど)。では (3) Holly Hackする場合はどうか。

これだとずれないようだ*1
ちなみに、 (1), (2), (3) いずれも使わない場合 (つまり、ディスプレイだとずれて表示される場合) ではこうなる。

やっぱりずれる。


さて、IE6だけではなくIE7でも試してみよう。

…ぜんぶずれた。


印刷の場合に起こるこの現象は、左ボーダーを含むブロック領域 (この場合はsecクラスのdiv要素) が複数のページにまたがる場合に発生するみたいだ。図を見比べるとわかるが、どうやら左ボーダーの幅を無視するようである。
よって、とりあえずの回避策として思いついたのはこんな感じだ。

  • page-break-*プロパティを使って改ページを制御する
  • @media printではpadding-left: 左パディングと左ボーダーの合計;のようにする

あとはCSSハックを駆使しまくれば何とかできるはずだが、めんどうになって私はあきらめた。


とにかく、IEは悲しすぎる。

*1:もしかしたら、たまたまずれなかっただけかもしれないが。