分页-*在Google chrome上不起作用
分页-*在Google chrome上不起作用
提问于 2013-01-13 19:55:42
我只是喜欢将.wp_left_col div下的divs放在单独的页面中。这是我的css代码。
.wpi_left_col > div {
page-break-after: always !important;
page-break-inside: avoid !important;
}它可以在Firefox上运行。为什么它不能在Google Chrome上工作？
回答 5
Stack Overflow用户
发布于 2013-12-14 01:01:01
因此，在经历了一些挫折之后，我找到了一个解决方案。这是一个黑客攻击，但是Chrome不支持正确的分页符，所以..您必须将所有父元素设置为显式浮动: none。在本例中，我将打印选项卡式内容。
<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看起来就像这样。
html, body, .main-content, .tabs, .tabbed-content { float: none; }
.tab {
display: block; /* unhide all tabs */
break-before: always;
page-break-before: always;
}Stack Overflow用户
发布于 2014-07-18 04:48:20
时间是2014年7月，到今天为止，使用的是float: none；对于所有的父元素，这对我来说是有效的：
@media print {
table {float: none !important; }
div { float: none !important; }
.page-break { page-break-inside: avoid; page-break-before: always; }
.dont-print { display: none; }
}这个解决方案适用于Firefox、Chrome和Safari。因为我使用的是Bootstrap，所以这里有!important，而bootstrap在div上做了一个浮点操作: left。
Stack Overflow用户
发布于 2016-02-02 21:03:34
3年后，针对div的float:none !important成为了在chrome中实现中断的解决方案。不需要float:none所有父级(body或html)
@media print {
div {
float: none !important;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14303178
复制相关文章
相似问题