「page-break-after:always; が指定されているのに IE11 で改行されない」という現象があったので調べました。
先に結論
- 結論としては、「page-break-after:always; の後ろに何らかの要素がないと駄目」な模様
- 以下 サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>てすと</title>
<style>
body { font-family:'Meiryo UI'; }
.test-section { margin-bottom:3em; }
.test-paseudo:after {
content: "";
display: inline;
}
</style>
<style media="print">
.page-break-text { display:none }
</style>
</head>
<body>
<!-- ================================================== -->
<div class="test-section">
<div>↓↓↓ これは IE11 では改行されませんでした</div>
<div style="page-break-after:always"></div>
</div>
<!-- ================================================== -->
<div class="test-section">
<div>↓↓↓ これは IE11 でも改行されました</div>
<div style="page-break-after:always"></div>
<div>↑↑↑ page-break-after の後ろに何か要素がないと駄目っぽい</div>
</div>
<!-- ================================================== -->
<div class="test-section">
<div>↓↓↓ なにかしら要素があれば何でも良いのか ⇒ 良いです</div>
<div style="page-break-after:always"></div>
<span></span>
</div>
<!-- ================================================== -->
<div class="test-section">
<div>↓↓↓ でも印刷時に非表示になる要素だと駄目だった</div>
<div style="page-break-after:always"></div>
<div class="page-break-text">---------------------------------------- 改行 ----------------------------------------</div>
</div>
<!-- ================================================== -->
<div class="test-section test-paseudo">
<div>↓↓↓ 疑似要素でも良いのかな･･･ ⇒ OKでした</div>
<div style="page-break-after:always"></div>
</div>
<!-- ================================================== -->
<div class="test-section">
あいうえお
</div>
</body>
</html>
- 単純に
<p>あああああ</p>
<p>いいいいい</p>
<div style="page-break-after:always"></div>
<p>ううううう</p>
みたいな感じだったら問題なかったんだろうけど、大枠の div で囲んで その末尾に改行を仕込んでいたので 改行されなかったみたいです。
(似たような現象で、stackoverflow に "後ろに空要素を入れれ" みたいな書き込みがあったので試したらいけました ありがとう)
ていうか
page-break-after じゃなくて
page-break-before にすればいいんじゃないかなこの使い方だったら･･･
