IE (IE6 でも正しく動作します) と Opera を除くほとんどのブラウザでこれを動作させるのに問題があります。
Firefox は div を正しく分離しますが、最初のページのみを印刷します。
Chrome と Safari は最後の div にのみ改ページを適用します。
これをすべてのブラウザで正しく動作させるにはどうすればよいですか?
HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
ID が および の div#leftNav
は#mainBody
に設定されているfloat:left
ため、適切に表示されます。
クラスのみを印刷し.pageBreak
、#leftNav
と残りの部分は#mainBody
CSS で非表示にしたいです。
CSS:
@media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
ベストアンサー1
親要素はfloat
それらを持つことができません。
float:none
すべての親要素に設定するとpage-break-before:always
、正しく動作するようになります。
他に壊れる可能性があるものは次page-break
のとおりです:
page-break
テーブル内使用- 浮動要素
inline-block
要素- 境界線のあるブロック要素