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 和 #mainBody 的其余部分。
CSS：
@media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
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;
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
尽管没有明确记录这一点，但应该注意的是，分页属性不能应用于表格元素。如果您有任何应用了
display: table;或display:table-cell;的元素（在clearfix 类下的许多模板中很常见），则包含的元素将忽略分页规则。只需取消打印样式表中的规则就可以了（当然，在浮动也被删除之后）。以下是如何针对常见的clearfix 问题执行此操作的示例。
我遇到的另一个地方是当模板使用
display:inline-block;声明整个页面（通常称为 main 或 main 包装器）时，如果该部分位于 inline-block 内部，则它不会起作用，所以也要睁大眼睛留意那些。使用
display:block更改或覆盖display:inline-block;应该可以。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;ordisplay: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.
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;withdisplay:blockshould work.我在 div 打印中有一个
position:absolute;导致它不起作用。I had a
position: absolute;in the div printing that caused this not to work.确保父元素具有
display:block;而不是display: flex;。这帮助我解决了问题Make sure the parent element has
display:block;rather thandisplay: flex;. This helped me fix the issue"Firefox 3.5 及之前版本不支持 escape、left 或 right 值。 ”
IE支持也是部分的
您可以通过 :page-break-before:always; 实现所需的效果所有浏览器都支持
“但只打印第一页”：我不认为它与CSS相关，我想它是在浏览器的打印窗口上的东西:)
"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 :)
你的代码是什么？
像这样？：
what's your code?
like this?:
父元素不能有
float。在所有父元素上设置
float:none可以使page-break-before:always正常工作。其他可能破坏
page-break的因素包括：page-breakinline-block元素Parent elements can not have
floaton them.Setting
float:noneon all parent elements makespage-break-before:alwayswork correctly.Other things that can break
page-breakare:page-breakinside tablesinline-blockelements为了完整起见，也为了其他遇到同样问题的人的利益，我只想补充一点，我还必须将
overflow:visible添加到 body 标记中，以便 FireFox 遵守分页甚至打印不止第一页。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.我发现 Twitter Bootstrap 类向页面添加了一堆内容，这使得分页符很难工作。 Firefox 可以立即运行，但我必须遵循各种建议才能使其在 Chrome 中运行，最后在 IE (11) 中运行。
我遵循了这里和其他地方的建议。我“发现”但尚未提及的唯一属性是“盒子大小”。 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 上的所有有问题的设置。当然，这也可能会破坏您的格式，这意味着您必须找到另一种方法来设置页面。
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.
如果父级有 float ，则有一个解决方案。对于应用分页符的元素，将元素设置为“overflow:hidden”。就这样。这对我有用。
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.