3

我正在格式化我的一个网页以进行打印，并在这样做时使用此 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它说

注意：尽量少使用分页属性，避免在表格、浮动元素、带边框的块元素中使用分页属性。

所以，我想我的问题是：

  1. FireFox 有解决方法吗？
  2. 如果不是，我将如何构建我的 html 才能使用 page-break-before （或实际上任何分页）。
4

2 回答 2

3

问题可能是由于在 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>

divs 对于这类事情更可靠。

于 2011-12-21T05:39:03.757 回答
0

这是我最终得到的结果（在 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>
于 2011-12-22T06:03:21.503 回答