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

我在大多数浏览器中除了IE（它甚至可以在IE6中正常工作）和Opera以外，无法正常工作。CSS分页符不适用于所有浏览器

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>

的DIV与的ID #leftNav和#mainBody被设置为float:left，因此它们很好地显示。

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

的CSS：

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

来源

2011-02-03 Richard Parnaby-King

据我所知，如果您使用“always”值，那么属性应该可以在所有主流浏览器中使用。你能发布你的相关CSS和HTML吗？ – AJJ 2011-02-03 09:40:09

如果你自己解决了这个问题，它不会成为下面的答案之一，为了后代的缘故，在这里发布它会是一个好主意，而不是在你的问题标题中附加[[solve]]（这并没有做任何事情）。另外请注意，SitePoint参考（sepehr链接到下面）是一个更好的参考CSS和HTML [W3Schools]（http://w3fools.com/） – 2011-03-13 19:35:32

这是我的第一篇文章和习惯的力量让我改变标题根据许多论坛规则而不是发布新帖子。我曾就此问题访问过SitePoint，但这并没有给我所需的帮助。在这种情况下，W3Schools做到了。 – 2011-03-15 16:13:33

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

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

其他可以破坏分页符的事情是：在表格中使用分页符，浮动元素，内嵌块元素和带有边框的块元素。

来源

2011-03-15 16:12:20

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


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

来源

2011-02-03 09:42:06

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE的支持也部分可以实现所需要的是：分页-前：永远;这在所有浏览器中都是支持的 “但是只打印第一页”：我不认为这是css相关的，我想这是在浏览器的打印窗口:)

来源

2011-02-03 09:55:32 sepehr

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

来源

2013-03-22 17:45:45 Vincent

这是为我修复东西的缺失步骤 – 2014-02-12 15:46:39

+10

为了更完整一点，`display：flex`似乎也搞乱了事情。 – Ben 2014-11-05 22:59:07

虽然这并没有明显记录，但应该注意，分页符属性不能应用于表格元素。如果您有任何元素应用了display: table;或display:table-cell;（在clearfix类下的许多模板中都是常见的），则包含的元素将忽略分页规则。只要取消你的打印样式表中的规则，你应该没问题（当然，浮游物也被移除了！）。

这是一个如何为流行的clearfix问题做到这一点的例子。

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

编辑：我忘了补充一点，我已经运行到这个其他的地方是当模板声明的整个页面（通常称为主或主包装）与display:inline-block;

如果截面内一个内联块，它不会工作，所以要保持你的眼睛。改变或覆盖display:inline-block;与display:block应该工作。

希望这会有所帮助！

〜techdude

来源

2013-08-21 15:46:53 techdude

我导致此不工作的股利印刷了position: absolute;。

来源

2013-12-17 17:00:16

我发现Twitter Bootstrap类为网页添加了一堆东西，这使得页面中断很难工作。 Firefox正常工作，但我必须遵循各种建议才能在Chrome中运行，最后是IE（11）。

我按照这里和其他地方的建议。我发现的“我发现”的唯一财产是“箱子大小”。 Bootstrap可以将此属性设置为“box-sizing：border-box”，这会破坏IE。一个IE浏览器友好的设置是“框大小：内容框”。由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; 
    } 

}

来源

2015-02-10 21:00:14 Yuri

有一个解决方案，如果父母有浮动。对于应用了分页符的元素，使元素溢出：隐藏。就这样。它为我工作。

<div style='float:left'> 

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

</div>

来源

2016-04-28 18:52:07

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

回答

相关问题