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的结果框架（可能是PDF打印机 - 不知道如何触发打印预览框架中的菜单项。）

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

Answer 1

这是因为float。 page-break float上的float消失了。从你的用例来看，似乎Firefox对此非常挑剔。

选项1：

如果您可以使用单个列，请删除@media print样式中的@media print { .col { float: none; width: auto; } /* remove the floats for print */ .extra { page-break-before: always; } /* no change here */ } 。

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

div

选项2：

清除父母的浮动不（实际上它应该在你的内在父母身上，而不是在你的小提琴中的外部，而不是在这里重要）;但请在.col s的额外<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> 兄弟上清除它。

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

标记

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

CSS

page-break-x

总结：确保在应用Y.Do.after(function(e) { $('.popover').hide(); var evt = e.getData('scheduler-event'); var id = evt.get('id'); //Other attr created in events array var MYATTRIBUTE = evt.get('MYATTRIBUTE'); }, eventRecorder, 'showPopover'); 的元素之前或之后没有浮动或清除浮动。