CSS页面中断无法在所有浏览器中正常运行

Question

我很难在大多数浏览器中使用此功能，但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 #leftNav和的div #mainBody设置为float:left，因此显示效果很好。

我只想打印.pageBreak类，#leftNav并#mainBody使用CSS 隐藏和的其余部分。

CSS：

@media print
{
 #leftNav
 {
  display:none;
 }
 #mainBody
 {
  border:none;
  margin:none;
  padding:none;
 }
}

Answer 1

父元素不能float放在它们上面。

float:none在所有父元素上进行设置可以page-break-before:always正常工作。

其他可能中断的事情page-break是：

• page-break在内部表中使用
• 浮动元素
• inline-block 元素
• 带边框的块元素