分页符-* 在谷歌浏览器上不起作用 [英] page-break-* doesn't work on Google chrome
本文介绍了分页符-* 在谷歌浏览器上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只是喜欢将.wp_left_col div 下的divs 放在单独的页面中.这是我的 css 代码.
.wpi_left_col >div {分页后:总是！重要的；page-break-inside:避免 !important;}它适用于 Firefox.为什么它在 Google Chrome 上不起作用?
解决方案
所以，经过一番挫折之后，我找到了解决方案.这是一个 hack，但 Chrome 不能正确支持分页符，因此.. 您必须将所有父元素设置为显式浮动:无.在这个例子中，我正在打印标签内容.
<主要角色=主要"><section class="tabs"><div class="tabbed-content"><div class="tab">打印第 1 页</div><div class="tab">打印第 2 页</div><div class="tab">打印第 3 页</div></节></main>
然后您的 CSS 看起来与此类似.
html, body, .main-content, .tabs, .tabbed-content { float: none;}.标签 {显示:块；/* 取消隐藏所有标签 */休息前:总是；分页前:总是；}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;
}
It works on Firefox. How come it doesn't work on Google Chrome?
解决方案
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>
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;
}
这篇关于分页符-* 在谷歌浏览器上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
