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>

显然在page-break-before的w3schools页面上显示

注意：尽可能少地使用分页属性，避免在表格，浮动元素中使用分页属性，和带边框的元素。

所以，我想我的问题是：

FireFox有解决方法吗？
如果没有，我将如何构建我的html才能使用page-break-before（或者真正的任何分页）。

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对于这类事情更可靠。

Answer 2

这是我最终得到的结果（在IE9和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>

修复IE9和Firefox之间的分页符之前的行为差异（3.6）

2 个答案: