page-break- *在谷歌chrome不工作 [英] page-break-* doesn't work on google chrome
问题描述
任何人都可以帮助我解决问题。这似乎很微不足道，但我不知道是什么问题。以下是实际网页： http://goo.gl/ViMKl 。我只是喜欢 divs 在 .wp_left_col div 在单独的页面。这是我的CSS代码。
Could anyone help me trouble shoot the problem. This seems very trivial but I couldn't figure out what's wrong. Here's the actual page: http://goo.gl/ViMKl. I just like the divs under .wp_left_col div be placed in separate pages. This is my css code.
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}
它适用于Firefox。
It works on Firefox. How come it doesn't work on Google Chrome?
推荐答案
因此，经过一些挫折，我找到了一个解决方案。这是一个黑客，但Chrome不正确支持分页符，所以..你必须设置所有的父元素显式float：none。在此示例中，我打印标签式内容。
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.
<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>
然后你的CSS看起来类似。
Then your CSS looks similar to this.
html, body, .main-content, .tabs, .tabbed-content { float: none; }
.tab {
display: block; /* unhide all tabs */
break-before: always;
page-break-before: always;
}
这篇关于page-break- *在谷歌chrome不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
