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和#mainBody的div设置为float:left，因此效果很好。

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

CSS：

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

Answer 1

父元素不能浮动它们。

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

其他可以破坏分页符的事情是：在表格，浮动元素，内联块元素和带边框的块元素中使用分页符。

Answer 2

为了完成，并且为了其他有相同问题的人的利益，我只想补充一点，我还必须将overflow: visible添加到body标签，以便FireFox服从页面打破甚至打印的不仅仅是第一页。

Answer 3

我发现Twitter Bootstrap类在页面中添加了大量内容，这使得难以使页面中断工作。 Firefox立即工作，但我必须遵循各种建议才能让它在Chrome中运行，最后是IE（11）。

我按照这里和其他地方的建议。我发现的唯一一个我还没有提到的属性是“盒子大小”。 Bootstrap可以将此属性设置为“box-sizing：border-box”，这会破坏IE。 IE友好设置是“box-sizing：content-box”。我被Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752提出的关于“带边框的元素”的警告引发了这一点。

看起来发现下一个可能会破坏分页符的属性似乎是一场军备竞赛。

这是适合我的设置（Chrome，FF，IE 11）。基本上，它会尝试覆盖打印页面上所有div上的所有有问题的设置。当然，这也可能会破坏您的格式，这意味着您必须找到另一种设置页面的方法。

@media print {

    div { float: none !important; position: static !important; display: inline; 
          box-sizing: content-box !important;
    }

}

Answer 4

虽然没有明确记录，但应注意，分页属性不能应用于表元素。如果您有任何应用了display: table;或display:table-cell;的元素（在clearfix类下的许多模板中很常见），则包含的元素将忽略分页规则。只需取消打印样式表中的规则，您就可以了（当然也删除了浮点数。）

以下是如何针对常见的clearfix问题执行此操作的示例。

.clearfix:before, .clearfix:after{  
    display: block!important;
}

我遇到的另一个地方是模板使用display:inline-block;

声明整个页面（通常称为主包装或主包装）

如果该部分位于内联块中，则无法正常工作，因此请睁大眼睛。使用display:inline-block;更改或覆盖display:block应该有效。

Answer 5

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE支持也是部分支持你可以通过以下方式实现所需：page-break-before：always;所有浏览器都支持 “但只打印第一页”：我认为它不是css相关的，我想它是在浏览器的打印窗口上：）

Answer 6

我在div打印中有一个position: absolute;导致无法正常工作。

Answer 7

如果父级有浮动，则有一个解决方案。对于应用分页符的元素，使元素溢出：隐藏。就这样。它对我有用。

<div style='float:left'>

<p style='overflow:hidden;page-break-before:always;'></p>

</div>

Answer 8

你的代码是什么？
像这样？：


<style>
@media print
{
table {page-break-after:always}
}
@media print
{
table {page-break-before:always}
}
</style>

Answer 9

确保父元素具有display:block;而不是display: flex;。这可以帮助我解决问题

CSS Page-Break在所有浏览器中都不起作用

9 个答案: