CSS Page-Break不适用于所有浏览器

我有麻烦得到这个工作在大多数浏览器，除了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和#mainBody的div被设置为float：left，因此它们显示得很好。

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

CSS：

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

回答：

阅读W3School’s Page-Break-After文章后，我意识到我没有从#mainBody div中删除浮动。设置float：none;在#mainBody div上，页面现在可以正确显示。 = D

感谢您的回复:)

解决方法

父元素不能在其上有浮动。

在所有父元素上设置float：none会使page-break-before：始终正常工作。

其他可以破坏page-break的方法有：在表中使用分页符，浮动元素，inline-block元素和带边框的块元素。

原文地址：https://www.jb51.cc/css/221271.html