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 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 s的額外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的元素。