CSS 分页符不适用于所有浏览器答案

【问题标题】：CSS Page-Break Not Working in all BrowsersCSS 分页符不适用于所有浏览器
【发布时间】：2011-06-20 12:59:06
【问题描述】：

除了 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;
 }
}

【问题讨论】：

据我所知，如果您使用“always”值，该属性应该适用于所有主流浏览器。你能发布你的相关css和html吗？
如果你自己解决了这个问题，但它不是下面的答案之一，为了后人的缘故，最好把它贴在这里，而不是附加 [solved]到您问题的标题（实际上并没有做任何事情）。另请注意，SitePoint 参考（sepehr 链接到下面）是 CSS 和 HTML than W3Schools 的更好参考
这是我的第一个帖子之一，习惯的力量使我根据许多论坛规则更改标题，而不是发布新帖子。我确实就这个问题访问了 SitePoint，但这并没有给我所需的帮助。在这种情况下，W3Schools 做到了。

标签： css page-break

【解决方案1】：

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


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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

父元素上不能有float。

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

其他可以破坏page-break的东西是：

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

【讨论】：

哪些浏览器对inline-block-elements 有问题？
你回答的最后一个陈述非常重要......我不得不在很多部分削减我的<table>，并在每一列上设置不同的固定大小，这样所述列就不会适应内容而且看起来仍然很棒。我现在想销毁世界上的每一台打印机......感谢您的澄清
display: flex; 也会破坏它。至少在我使用 Chrome 的经验中 :)

【解决方案4】：

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

【讨论】：

为了更完整，display:flex 似乎也把事情搞砸了。
@Rajesh 这对您来说是否也影响了 Chrome？还是只有 Firefox？
在 Firefox 中打印 display:flex 搞砸了，把 display:block 放在 print.css 中
有时，IE 需要overflow: hidden 才能使break-inside: avoid 正常工作。
@media print{ body{ overflow:visible; } } 解决了我的问题，谢谢！

【解决方案5】：

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

这是一个如何解决流行的 clearfix 问题的示例。

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

我发现 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;
    }

}

【讨论】：

谢谢我添加显示：内联！重要；和边距：0！也很重要

【解决方案8】：

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

<div style='float:left'>

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

</div>

【讨论】：

这工作正常，对我来说使用wkhtmltopdf 我需要设置html, body { overflow: hidden; }，因为模板.css 使用overflow-x:hidden。这不应该被否决。谢谢！

【解决方案9】：

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

【讨论】：