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

Question

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

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

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

How can I get this working across all browsers correctly?

The 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 #leftNav and #mainBody are are set to float:left , so they display nicely.

I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.

The CSS:

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

Answer 1

Parent elements can not have float on them.

Setting float:none on all parent elements makes page-break-before:always work correctly.

Other things that can break page-break are:

• using page-break inside tables
• floating elements
• inline-block elements
• block elements with borders

Answer 2

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

Answer 3

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).

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 .

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.

@media print {

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

}

Answer 4

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).

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

.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;

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:block should work.

Answer 5

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

Answer 6

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.

<div style='float:left'>

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

</div>

Answer 7

"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 :)

Answer 8

what's your code?
like this?:

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

Answer 9

Make sure the parent element has display:block; rather than display: flex; . This helped me fix the issue