css - 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>

#leftNav带有 ID和的 div#mainBody设置为float:left，因此它们显示得很好。

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

CSS：

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

score 111 · Accepted Answer

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

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

其他可能破坏的事情page-break是：

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

score 34 · Accepted Answer

为了完成，为了其他有同样问题的人的利益，我只想补充一点，我还必须添加overflow: visible到 body 标签中，以便 FireFox 遵守分页符，甚至打印更多内容第一页。

score 23 · Accepted Answer

我发现 Twitter Bootstrap 类向页面添加了很多东西，这使得分页符很难工作。Firefox 立即工作，但我必须遵循各种建议才能让它在 Chrome 中工作，最后是 IE (11)。

我遵循了这里和其他地方的建议。我“发现”的唯一一个我还没有提到的属性是“box-sizing”。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;
    }

}

score 9 · Accepted Answer

虽然这没有显着记录，但应该注意分页符属性不能应用于表格元素。如果您有任何元素具有display: table;或display:table-cell;应用于它们（在 clearfix 类下的许多模板中很常见），那么包含的元素将忽略分页规则。只需取消打印样式表中的规则，就可以了（当然，在浮动也被删除之后）。

这是一个如何针对流行的 clearfix 问题执行此操作的示例。

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

我遇到的另一个地方是当模板声明整个页面（通常称为主包装器或主包装器）时display:inline-block;

如果该部分位于内联块内，则它将不起作用，因此请注意这些部分。更改或覆盖应该有效display:inline-block;。display:block

score 8 · Accepted Answer

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

<div style='float:left'>

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

</div>

score 7 · Accepted Answer

7

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

于 2013-12-17T17:00:16.340 回答

score 6 · Accepted Answer

“Firefox 3.5 及以下版本不支持避免、左或右值。” IE 支持也是部分的，您可以通过 :page-break-before:always; 实现所需的功能；所有浏览器都支持“但只打印第一页”：我不认为它与 css 相关，我想它是浏览器的打印窗口上的 sth :)

score 6 · Accepted Answer

6

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

于 2020-05-31T09:22:59.057 回答

score 5 · Accepted Answer

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


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

css - CSS 分页符不适用于所有浏览器

9 回答 9

Related

Reference