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

感到疯狂。从你的用例来看，Firefox 似乎对此非常挑剔。

选项1：

如果您可以使用单列，请删除

float

样式中的

@media print

。

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

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

选项2：

清除父级上的浮动而不是（实际上它应该在您的内部父级上，而不是小提琴中的外部浮动，这在这里并不重要）；但在您的

div

的额外

.col

兄弟姐妹上清除它。

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

标记

<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

Answer 3

我意识到这是一个老问题，但由于这是我在寻找答案时在 Google 中找到的第一个链接，因此我添加此链接是希望它可以挽救某人的理智。

我有很多浮动元素，其中一些具有非常具体的选择器，所以我将其添加到我的@media打印样式中：

    * {
    float: none!important;
    width: 100%!important;
    max-width: 100%!important;
}

这并没有解决问题 - 然后我意识到我将正文设置为显示：网格 - 当我将其更改为显示：块时，Firefox 尊重分页符。