Fix page-break-before Verhalten Unterschied zwischen IE9 und Firefox (3.6)

Ich bin der Formatierung einer meiner Webseiten für den Druck, und damit bin hinzufügen ein Seitenumbruch mit dieser CSS-Stil.

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

In meinen ersten Tests (drucken mit XPS-Dokument-generator), ich habe bemerkt, dass beim drucken aus IE9 die Seitenumbrüche angezeigt und im Firefox nicht.

Ein Beispiel Seite, die Ausgabe würde wie folgt Aussehen : 

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

Offenbar auf der w3schools-Seite für page-break-before es sagt

Hinweis: Verwenden Sie die page-breaking Eigenschaften so wenige Male wie möglich und vermeiden Sie die page-breaking Eigenschaften in Tabellen, floating elements,
und block-Elemente mit Grenzen.

So, ich denke, meine Frage(N) wäre:

  1. Gibt es eine Abhilfe für FireFox?
  2. Wenn nicht, wie müsste ich meine html-Struktur nutzen zu können page-break-before (oder wirklich jede Seite zu brechen).
  • Sie verweisen W3Schools über, da das W3C aber W3Schools ist in keiner Weise verbunden mit dem W3C.
InformationsquelleAutor Malcolm O'Hare | 2011-12-21
  1. 3

    Ist das problem wahrscheinlich aufgrund der mit Ihr page-break-before Klasse auf einem tr-element. Versuchen Sie dies:

    <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 sind zuverlässig für diese Art der Sache.

    • Dies ist, hinterlässt Sie eine leere erste Seite und zeigt alle 4 Elemente auf der zweiten Seite, im IE und FF.
    • Ah, es könnte sein, dass der browser nicht gefällt, brechen Sie die Tabelle über mehrere Seiten. In diesem Fall, Ende der Tabelle, fügen Sie die div, starten Sie dann die Tabelle wieder. Ich werde aktualisieren, Antwort zu zeigen.
    • +1 für Start me down die Richtung, die ich nahm
    InformationsquelleAutor Jake Feasel
  2. 0

    Hier ist, was ich am Ende mit (getestet in IE9 und FF 3.6). Es verhält sich so, wie ich es erwartet habe.

    <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>
    InformationsquelleAutor Malcolm O'Hare
Schreibe einen Kommentar