3

Web ページの 1 つを印刷用にフォーマットしています。その際に、この 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 ページにあるようです。

注:改ページ プロパティを使用する回数はできるだけ少なくし、表、フローティング要素、境界線のあるブロック要素内では改ページ プロパティを使用しないようにします。

だから、私の質問は次のようになると思います：

  1. FireFox の回避策はありますか?
  2. そうでない場合、page-break-before (または実際には改ページ) を使用できるように、html をどのように構成する必要がありますか。
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>

div は、この種のことに対してより信頼性があります。

于 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 に答える