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

CSS Page-Break Not Working in all Browsers

提问by Richard Parnaby-King

I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.

除了 IE（它甚至可以在 IE6 中正常工作）和 Opera 之外，我在大多数浏览器中都无法使用它。

Firefox separates the divs correctly but only prints the first page.

Firefox 正确分隔 div，但只打印第一页。

Chrome and Safari only applies the page break to the last div.

Chrome 和 Safari 仅将分页符应用于最后一个 div。

How can I get this working across all browsers correctly?

我怎样才能在所有浏览器上正确地工作？

The HTML:

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>

The divs with the IDs #leftNavand #mainBodyare are set to float:left, so they display nicely.

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

I only want to print the .pageBreakclasses, hiding the #leftNavand the rest of the #mainBodywith CSS.

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

The CSS:

CSS：

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

回答by Richard Parnaby-King

Parent elements can not have floaton them.

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

Setting float:noneon all parent elements makes page-break-before:alwayswork correctly.

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

Other things that can break page-breakare:

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

• using page-breakinside tables
• floating elements
• inline-blockelements
• block elements with borders

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

回答by Vincent

For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visibleto the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.

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

回答by Yuri

I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).

我发现 Twitter Bootstrap 类向页面添加了一堆东西，这使得分页符很难工作。Firefox 马上就可以工作了，但我不得不遵循各种建议才能让它在 Chrome 中工作，最后在 IE (11) 中工作。

I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.

我遵循了这里和其他地方的建议。我“发现”但尚未提及的唯一属性是“box-sizing”。Bootstrap 可以将此属性设置为“box-sizing:border-box”，这破坏了 IE。一个 IE 友好的设置是“box-sizing: content-box”。我被 Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752关于“带边框的块元素”的警告所引导。

It looks like it's a bit of an arms race to discover the next property that might break page-breaks.

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

This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.

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

@media print {

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

}

回答by techdude

Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table;or display:table-cell;applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).

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

Here is an example of how to do this for the popular clearfix problem.

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

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

The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;

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

If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block;with display:blockshould work.

如果该部分位于 inline-block 内，它将不起作用，因此也请睁大眼睛。更改或覆盖display:inline-block;与display:block应该工作。

回答by Sarath Mohan

There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.

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

<div style='float:left'>

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

</div>

回答by ade jones

I had a position: absolute;in the div printing that caused this not to work.

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

回答by sepehr

"Firefox versions up to and including 3.5 don't support the avoid, left, or right values."IE support is also partial you can achieve what needed by :page-break-before:always; which is supported in all browsers "but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)

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

回答by Mohammad Ali Akbari

what's your code?
like this?:

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

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