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

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和#mainBodyare 的div 被设置为float:left,因此它们显示得很好.

我只想打印.pageBreak类,隐藏CSS #leftNav的其余部分#mainBody.

CSS:

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

Answer 1

父元素不能浮动它们.

float在所有父元素上设置可以float:none正常工作.

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

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制作的关于"带边框的元素元素"的警告引导到了这一点/sf/answers/372021331/.

看起来有点像军备竞赛,发现可能破坏分页符的下一个属性.

这是适合我的设置(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应该工作.

希望这可以帮助!

〜techdude

Answer 5

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

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

Answer 6

"Firefox版本(包括3.5版本)不支持避免,左或右值." IE支持也是部分你可以通过以下方式实现所需:page-break-before:always; 所有浏览器都支持"但只打印第一页":我不认为它与css相关,我想它是在浏览器的打印窗口上......

Answer 7

我position: absolute;在div打印中有一个导致这不起作用.

Answer 8

如果父项具有float，则有解决方案。对于您应用分页符的元素，使该元素溢出：隐藏。就这样。它为我工作。

<div style='float:left'>

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

</div>

Answer 9

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