IE + CSS「border-leftとpadding-bottom」の謎は、まだ解決できていない
さて、どうしたら解決できるでしょうか。以下に考えられる解決策をいくつか挙げておきます。もちろん、他にもあるかもしれません。とっておきの方法がありましたらご一報ください。
引用元では3つの解決策が挙げられているが、解決できていない…というか、新たな謎に出会うことになるはずだ。たぶん。
(なお、私には建設的な代案なんか一切ない。)
問題が起こりやすくなるように、少しだけスタイルシートを変更する。caps
クラス以外はそのまま。
.caps{ /*見やすさのため。バグには関係ありません */ border: 1px solid blue; margin: 0; margin-bottom: 20em; /* ←追加 */ }
ディスプレイの表示は予想どおりになるはずだが、印刷プレビューするとどうなるだろうか。まずは (1) border-left
とpadding-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:もしかしたら、たまたまずれなかっただけかもしれないが。