CSS page-break-* 在谷歌浏览器上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14303178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
page-break-* doesn't work on Google chrome
提问by jilseego
I just like the divsunder .wp_left_coldivbe placed in separate pages. This is my css code.
我就像divs下.wp_left_coldiv被放置在单独的页面。这是我的 css 代码。
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}
It works on Firefox. How come it doesn't work on Google Chrome?
它适用于 Firefox。为什么它在谷歌浏览器上不起作用？
回答by Matthew Nolting
So, after some frustration, I found a solution. It's a hack, but Chrome doesn't support page breaks properly, so.. You have to set all of the parent elements to explicitly float: none. In this example, I'm printing tabbed content.
所以，在经历了一些挫折之后，我找到了一个解决方案。这是一个 hack，但 Chrome 不支持正确的分页符，所以.. 您必须将所有父元素设置为显式浮动：无。在此示例中，我正在打印选项卡式内容。
<body>
<main role="main">
<section class="tabs">
<div class="tabbed-content">
<div class="tab">print page 1</div>
<div class="tab">print page 2</div>
<div class="tab">print page 3</div>
</div>
</section>
</main>
</body>
Then your CSS looks similar to this.
然后您的 CSS 看起来与此类似。
html, body, .main-content, .tabs, .tabbed-content { float: none; }
.tab {
display: block; /* unhide all tabs */
break-before: always;
page-break-before: always;
}
回答by Sid Krishnan
It's July 2014, and as of today doing float: none; for all parent elements is what worked for me:
现在是 2014 年 7 月，截至今天做浮动：无；对于所有父元素对我有用：
@media print {
table {float: none !important; }
div { float: none !important; }
.page-break { page-break-inside: avoid; page-break-before: always; }
.dont-print { display: none; }
}
This solution works on Firefox, Chrome and Safari. I have the !important in there because I'm using Bootstrap, and bootstrap does a float: left by default on divs.
此解决方案适用于 Firefox、Chrome 和 Safari。我在那里有 !important 是因为我使用的是 Bootstrap，而 bootstrap 会在 div 上做一个 float: left 默认情况下。
回答by José Esteves
3 years later float:none !importantfor divwas the solution for getting the break working in chrome. Not necessary to float:noneall parents (bodyor html)
3 年后，float:none !importantfordiv是在 chrome 中实现中断的解决方案。并非float:none所有父母都需要（body或html）
@media print {
div {
float: none !important;
}
}
回答by José Esteves
<div style="display: inline-block; ">has been reported as a way to avoid page-breaking in the middle of something, YMMV. Also, try removing borders, and ensure there are no floats. See also CSS Page-Break Not Working in all Browsers.
<div style="display: inline-block; ">据报道，这是一种避免在某事中间分页的方法，YMMV。此外，尝试删除边框，并确保没有浮动。另请参阅CSS 分页符不适用于所有浏览器。
回答by Simon Hayter
Chrome has problems processing page-break-after, and page-break-inside this is a known bug and Google has said a few times to avoid using this type of styling since not only Chrome but many more browsers run into problems using it.
Chrome 在处理 page-break-after 时遇到问题，page-break-inside 这是一个已知的错误，谷歌已经多次表示要避免使用这种类型的样式，因为不仅是 Chrome，而且还有更多的浏览器在使用它时都会遇到问题。
You should consider styling the tables thought DIV's rather than the tables themselves. Personally in this day and age its normally best to avoid using tables as they are not as flexible as DIV styling.
您应该考虑为表格设置 DIV 的样式，而不是表格本身。个人在这个时代通常最好避免使用表格，因为它们不像 DIV 样式那样灵活。
DIV styling as mentioned is more flexible and easy to work with and looks almost the same on all browsers since browsers tend to render tables differently across browers.
如上所述的 DIV 样式更灵活且易于使用，并且在所有浏览器上看起来几乎相同，因为浏览器倾向于在不同浏览器之间呈现不同的表格。
Here is a simple example of how to style the first table you have in DIV and is by far pixel perfect but should give you an idea. Almost the same with some improvement but without the font you use doesn't look as good, doesnt use image as the background which is ++ :P
这是一个简单的示例，说明如何为您在 DIV 中拥有的第一个表格设置样式，到目前为止像素完美，但应该给您一个想法。几乎相同，但有一些改进，但没有您使用的字体看起来不太好，不使用图像作为背景，即 ++ :P
CSS
CSS
#page {margin:0 auto;width:960px;padding:20px;background:#99deea;}
.myblock {background:#c1ebf2;padding:20px;border-radius:10px;}
.innerblock {width:33.3%;float:left;}
.innerblock h3 {font-size:20px;text-align:center;color:#424242;font-weight:bold;text-shadow:0 0 3px #FFFFFF;}
.innerblock h4 {font-size:14px;padding:10px 0 0 0;color:#778A2C;text-shadow:0 0 3px #FFFFFF;}
.innerblock p {font-size:16px;color:#7A8634;font-weight:bold;padding:0 0px 15px 75px;text-shadow: 0 1px 1px #FFFFFF;}
HTML
HTML
<div id="page">
<div class="myblock">
<div class="innerblock">
<h3>Spencer Hill</h3>
<h4>Recent Work:</h4>
<p>Example Work Number 1</p>
<p>Example Work Number 2</p>
<p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Becca Ward 0</h3>
<h4>Recent Work:</h4>
<p>Example Work Number 1</p>
<p>Example Work Number 2</p>
<p>Example Work Number 3</p>
</div>
<div class="innerblock">
<h3>Rachel Tourville 0</h3>
<h4>Recent Work:</h4>
<p>Example Work Number 1</p>
<p>Example Work Number 2</p>
<p>Example Work Number 3</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
I've saved this code online for you to see and test, take a look at http://jsfiddle.net/tsd4V/
这段代码我已经在线保存供大家查看和测试，看看http://jsfiddle.net/tsd4V/
Again this is just a better method you can use table styling but don't use page-break if you want good cross browser compatibility.
同样，这只是一种更好的方法，您可以使用表格样式，但如果您想要良好的跨浏览器兼容性，请不要使用分页符。
回答by Jeremy Caris
here's an easier solution for setting all parent elements to not float on print:
这是将所有父元素设置为不在打印时浮动的更简单的解决方案：
@media print {
* {
float: none !important;
}
.tab {
display: block;
break-before: always;
page-break-before: always;
}
}
