Firefox 在打印时忽略分页前

Question

我有一个@media print{}部分来调整网站以进行打印。 我在主要块之前强制分页。 但是，Firefox 中的元素重叠（其他浏览器按预期呈现所有内容）。 如以下打印预览所示，红色块显示在顶部或上一个内容上，而不是跳转到第 3 页：

HTML结构是这样的：

<div class="cols">
    <div class="col col1de2">This is the yellow block</div>
    <div class="col col2de2">This is the blue block</div>
</div>
<div class="extra">This is the red block</div>

...这是相关的CSS：

.cols{
    overflow: hidden;
}
.col{
    float: left;
    width: 40%;
}
.extra{
    page-break-before: always;
    clear: both; /* Attempted workaround: didn't work */
}

尽管您需要打印 JSFiddle 的Result框架（可能打印到 PDF 打印机——不确定如何在框架中触发Print Preview菜单项），但您可以在其中看到操作。

您能找出解决方法或解决方法吗？

Answer 1

这是因为float 。 page-break符在float s 上变得疯狂。 从您的用例来看，Firefox 似乎对此更加挑剔。

选项1：

如果您可以使用单个列，请删除@media print样式中的float 。

所需的更改将是（根据您的小提琴）：

@media print { 
    .col { float: none; width: auto; } /* remove the floats for print */
    .extra { page-break-before: always; } /* no change here */
}

选项 2：

清除不在父级上的浮动（实际上它应该在您的内部父级上，而不是在您的小提琴中，而不是外部父级，在这里无关紧要）； 但在.col的额外div兄弟上清除它。

所需的更改将是（根据您的小提琴）：

标记

<div class="cols">
    <div class="col col1de2">Sed lacinia mi..</div>
    <div class="col col2de2"> Suspendisse sit amet..</div>
    <div class="clear"></div> <!-- clear the float here -->
</div>

CSS

.col { float: left; width: 40%; } /* no change here */
.clear { clear: both; } /* clear here */

总结：确保在应用page-break-x的元素之前或之后没有浮动或清除浮动。

Answer 2

  page-break-after: always;

已被替换为

break-after: always;

在新的火狐中
使用这两种方法来防止问题

page-break-after: always;
break-after: always;

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after