Firefox在打印时忽略分页前 [英] Firefox ignores page-break-before when printing

问题描述

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

I have a @media print{} section to tweak a site for printing. I'm forcing a page break before main blocks. However, elements overlap in Firefox (other browsers render everything as expected). As the following print preview illustrates, red block displays on top or previous content rather than jumping to page 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:

... and this is the relevant CSS:

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

尽管您需要打印JSFiddle的 Result ，但您可以看到它的作用框架(可能是PDF打印机-不确定如何触发框架中的打印预览菜单项).

You can see in it action though you need to print JSFiddle's Result frame (possibly to a PDF printer—not sure about how to trigger Print Preview menu item in a frame).

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

Can you figure out a fix or workaround?

推荐答案

这是因为 float . page-break 在 float 上变得疯狂起来.从您的用例来看，Firefox似乎对此格外挑剔.

It is because of the float. page-break goes bonkers on floats. From your use-case, it seems Firefox is being extra finicky on this.

选项1:

以您的 @media印刷样式删除 float .

所需的更改将是(根据您的小提琴):

The changes required would be (as per your fiddle):

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

选项2:

Option 2:

清除父项上的浮点数不(实际上，它应该在您的内部父项上，而不是您的小提琴中的外部父项，在这里不重要)；但请在您的 .col s的另一个 div 兄弟姐妹上清除它.

Clear the floats not on the parent (actually it should have been on your inner parent though instead of outer one in your fiddle, not that matters here); but clear it on an extra div sibling of your .cols.

所需的更改将是(根据您的小提琴):

The changes required would be (as per your 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 的元素之前或之后没有浮点数或清除浮点数.

To summarize: Make sure there are no floats or clearing floats immediately preceding or succeeding the element on which page-break-x is applied.

这篇关于Firefox在打印时忽略分页前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！