修復IE9和Firefox之間的頁面中斷之前的行爲差異（3.6）

Question

我正在格式化我的一個網頁以進行打印，並且正在使用此CSS樣式添加分頁符。

@media print 
{ 
    .page-break { display:block; page-break-before:always; } 
    .print-hidden { display:none; } 
} 

在我最初的測試（使用XPS文檔寫入打印），我已經注意到，從IE9打印時的分頁符出現，並在Firefox他們不這樣做。

樣本頁面輸出將如下所示：

<table> 
    <tr class="print-hidden"><th colspan=3>Balance</th></tr> 
    <tr><td>10</td><td>x</td><td>(St) Legs Together: Head Turn</td></tr> 
    <tr><td>5</td><td>x</td><td>(St) One Leg: </td></tr> 
    <tr></tr> 
    <tr class="print-hidden"><th colspan=3>UE Strengthening</th></tr> 
    <tr><td>100</td><td>x</td><td>(Su) Biceps</td></tr> 
    <tr class="page-break"></tr> 
    <tr><td>50</td><td>x</td><td>(Su) Tricpes</td></tr> 
    <tr></tr> 
</table> 

顯然W3Schools的頁面上page-break-before它說

注：使用頁面斷裂性能的幾次越好，避免表格，浮動元素， 以及具有邊框的塊元素內的分頁屬性。

所以，我想我的問題（S）將是：

1. 是否有FireFox的一個解決方法嗎？
2. 如果不是，我將如何構建我的html，以便能夠使用page-break-before（或者真正的任何頁面中斷）。

Answer 1

這就是我最後的結果（在I​​E9和FF 3.6上測試）。它的行爲如我所料。

<ul> 
    <li><reps>10</reps> x <exercisename>(St) Legs Together: Head Turn</exercisename></li> 
    <li><reps>5</reps> x <exercisename>(St) One Leg: </exercisename></li> 
    <li><reps>100</reps> x <exercisename>(Su) Biceps</exercisename></li> 
    <li class="page-break"><reps>50</reps> x <exercisename>(Su) Tricpes</exercisename></li> 
</ul> 

Answer 2

該問題可能是由於在tr元素上放置了頁面折斷前類。嘗試更改爲：

<table> 
    <tr class="print-hidden"><th colspan=3>Balance</th></tr> 
    <tr><td>10</td><td>x</td><td>(St) Legs Together: Head Turn</td></tr> 
    <tr><td>5</td><td>x</td><td>(St) One Leg: </td></tr> 
    <tr></tr> 
    <tr class="print-hidden"><th colspan=3>UE Strengthening</th></tr> 
    <tr><td>100</td><td>x</td><td>(Su) Biceps</td></tr> 
</table> 
<div class="page-break"></div> 
<table> 
    <tr><td>50</td><td>x</td><td>(Su) Tricpes</td></tr> 
    <tr></tr> 
</table> 

divs對於這類事情更可靠。