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 */
}

你可以 see in it action 虽然你需要打印 JSFiddle 的 Result 框架（可能是 PDF 打印机——不确定如何触发 打印预览 框架中的菜单项）。

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

Answer 1

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

选项 1：

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

所需的更改是（根据您的 fiddle）：

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

选项 2：

清除父级上的浮动 而不是 （实际上它应该在你的内部父级上，而不是你的 fiddle 中的外部父级，在这里不重要);但在你 .col 的额外 div 兄弟姐妹上清除它。

所需的更改是（根据您的 fiddle）：

标记

<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;

在新的 firefox 中
使用这两个来防止问题

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

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

Firefox 在打印时忽略分页前

Firefox ignores page-break-before when printing

html

css

firefox

gecko