html - 修复 IE9 和 Firefox (3.6) 之间的分页前行为差异

Question

我正在格式化我的一个网页以供打印，并在这样做时使用此 CSS 样式添加分页符。

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

在我的初始测试(使用 XPS Document Writer 打印)中，我注意到从 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它说

Note: Use the page-breaking properties as few times as possible and avoid page-breaking properties inside tables, floating elements, and block elements with borders.

所以，我想我的问题是:

1. FireFox 是否有解决方法？
2. 如果没有，我将如何构建我的 html 才能使用分页前(或任何分页符)。

Answer 1

问题可能是由于在 tr 元素上设置了 page-break-before 类。尝试更改为:

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

对于这种事情，div 更可靠。