CSS分页符不适用于所有浏览器
我很难让大多数浏览器都能正常工作，除了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和#leftNav的其余部分。
CSS：
@media print { #leftNav { display:none; } #mainBody { border:none; margin:none; padding:none; } }
父元素不能在其上浮动。
在所有父元素上设置float:none将使page-break-before:always正常工作。
其他可能会破坏分页符的事情是：在表格中使用分页符，浮动元素，内联块元素和带边框的块元素。
为了完成，并为了其他同样的问题的人的利益，我只想补充，我还必须添加overflow: visible身体标记overflow: visible ，以便FireFox服从分页，甚至打印不仅仅是第一页。
我发现Twitter Bootstrap类在页面中添加了一堆东西，这使得分页工作变得困难。 火狐工作马上，但我不得不遵循各种build议，让它在Chrome中，最后，IE（11）。
我遵循这里和其他地方的build议。 我发现的“我发现”的唯一财产是“箱子大小”。 Bootstrap可以将这个属性设置为“box-sizing：border-box”，这就打破了IE。 一个IE浏览器友好的设置是“框大小：内容框”。 由Richard Parnaby-King制作的关于“带有边界的块元素”的告诫导致了这个问题https://stackoverflow.com/a/5314590/3397752 。
看起来这是一个军备竞赛，发现下一个可能会破坏分页符的属性。
这是我工作的设置（Chrome，FF，IE 11）。 基本上，它试图覆盖打印页面上所有div的所有有问题的设置。 当然，这也可能会破坏你的格式，这意味着你必须find另一种方式来设置页面。
@media print { div { float: none !important; position: static !important; display: inline; box-sizing: content-box !important; } }
“Firefox版本不超过3.5，不支持避免，左移或右移值。” IE支持也是可以实现的：page-break-before：always; 在所有的浏览器中都支持“但只打印第一页”：我不认为这是CSS相关的，我想这是浏览器的打印窗口:)
虽然这没有明显logging，但应该注意，分页属性不能应用于表格元素。 如果您有任何具有display: table;元素， 或者display:table-cell; 应用于它们（在clearfix类下的许多模板中都是常见的），那么包含的元素将忽略分页规则。 只要取消你的打印样式表中的规则，你应该没问题（当然，浮游物也被移除了！）。
这里是一个如何做到这个stream行的clearfix问题的例子。
.clearfix:before, .clearfix:after{ display: block!important; }
编辑：我忘了补充一点，我已经跑到这是当模板宣布整个页面（通常称为主或主包装）与display:inline-block;
如果该部分位于内联块内部，则该部分将无法工作，因此请保持睁大眼睛。 改变或覆盖display:inline-block; 与display:block应该工作。
希望这可以帮助！
〜techdude
你的代码是什么？
喜欢这个？：
<style> @media print { table {page-break-after:always} } @media print { table {page-break-before:always} } </style><style> @media print { table {page-break-after:always} } @media print { table {page-break-before:always} } </style>
我有一个position: absolute; 在造成这个不工作的div印刷。
如果家长有浮动，有一个解决scheme。 对于应用分页符的元素，使元素溢出：隐藏。 就这样。 它为我工作。
<div style='float:left'> <p style='overflow:hidden;page-break-before:always;'></p> </div>
