Przerwanie strony CSS nie działa we wszystkich przeglądarkach.

Question

Mam problem z uzyskaniem tego działającego w większości przeglądarek, z wyjątkiem IE (działa nawet poprawnie w IE6) i Opery.

Firefox prawidłowo oddziela litery div, ale drukuje tylko pierwszą stronę.

Chrome i Safari stosują podział strony tylko do ostatniego elementu div.

Jak poprawnie uruchomić to działanie we wszystkich przeglądarkach?

HTML:

<div id="leftNav"> 
    <ul> 
    <!--links etc--> 
    </ul> 
</div> 
<div id="mainBody"> 
<div id="container"> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
    <div class="pageBreak"> 
    <!--content--> 
    </div> 
</div> 
</div> 

div z identyfikatorami #leftNav i #mainBody są ustawione są float:left, więc one wyświetlane ładnie.

Chcę wydrukować tylko klasy .pageBreak, ukrywając #leftNav i resztę #mainBody za pomocą CSS.

CSS:

@media print 
{ 
#leftNav 
{ 
    display:none; 
} 
#mainBody 
{ 
    border:none; 
    margin:none; 
    padding:none; 
} 
} 

Answer 1

Elementy nadrzędne nie mogły się na nich unosić.

Ustawienie float:none dla wszystkich elementów rodzica powoduje, że page-break-before:always działa poprawnie.

Inne rzeczy, które mogą przerwać łamanie strony, to: używanie łamania strony w tabelach, elementy pływające, elementy bloków śródliniowych i elementy bloków z ramkami.

Answer 2

co jest kod?
tak ?:

<style> 
@media print 
{ 
table {page-break-after:always} 
} 
@media print 
{ 
table {page-break-before:always} 
} 
</style> 
 

Answer 3

"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values." IE wsparcie jest również częściowe można osiągnąć to, co potrzebne: page-break-before: always; który jest obsługiwany we wszystkich przeglądarkach "ale tylko wydrukuj pierwszą stronę": Nie sądzę, że jest związana z CSS, przypuszczam, że jest coś w oknie drukowania przeglądarki :)

Answer 4

Na zakończenie i na korzyść innych, którzy mają ten sam problem, po prostu chcę dodać, że musiałem dodać overflow: visible do tagu body, aby FireFox był posłuszny łamaniu stron, a nawet wydrukować więcej niż tylko pierwszą stronę.

Answer 5

Chociaż nie jest to wyraźnie udokumentowane, należy zauważyć, że właściwości podziału strony nie można zastosować do elementów tabeli. Jeśli masz jakieś elementy, które mają zastosowanie do nich display: table; lub display:table-cell; (wspólne dla wielu szablonów w ramach klasy clearfix), wówczas zawarte elementy będą ignorować reguły łamania strony. Po prostu anuluj regułę w arkuszu stylów drukowania i powinieneś być w porządku (oczywiście po usunięciu elementów pływających!).

Oto przykład, jak to zrobić w przypadku popularnego problemu dotyczącego usuwania błędów.

.clearfix:before, .clearfix:after{ 
    display: block!important; 
} 

EDIT: Zapomniałam dodać, że inne miejsce, kiedy napotkasz to jest, gdy szablon zadeklarował całą stronę (zazwyczaj o nazwie główny lub główny wrapper) z display:inline-block;

Jeżeli sekcja jest w środku z bloku inline, to nie zadziała, więc miej oczy otwarte również na te. Zmiana lub nadpisanie display:inline-block; z display:block powinno działać.

Mam nadzieję, że to pomoże!

~ techdude

Answer 6

miałem position: absolute; w druku div, który spowodował to nie działa.

Answer 7

Zauważyłem, że klasy Bootstrap na Twitterze dodają do strony kilka rzeczy, które utrudniały pracę z podziałem stron. Firefox działał od razu, ale musiałem postępować zgodnie z różnymi sugestiami, aby uruchomić go w Chrome i wreszcie IE (11).

Podążyłem za sugestiami tutaj i gdzie indziej. Jedyną własnością, którą "odkryłem", o której jeszcze nie wspomniałem, jest "wymiar boksu". Bootstrap może ustawić tę właściwość na "box-sizing: border-box", która zepsuła IE. Ustawienie przyjazne dla IE to "box-sizing: content-box". Doprowadziło mnie do tego zastrzeżenie dotyczące "elementów blokowych z obrzeżami" autorstwa Richarda Parnaby-Kinga https://stackoverflow.com/a/5314590/3397752.

Wygląda na to, że to trochę wyścig zbrojeń, aby odkryć kolejną nieruchomość, która może przerwać przerwy na strony.

To ustawienie zadziałało dla mnie (Chrome, FF, IE 11). Zasadniczo próbuje zastąpić wszystkie problematyczne ustawienia wszystkich elementów div na wydrukowanej stronie. Oczywiście może to również złamać formatowanie, a to oznacza, że ​​będziesz musiał znaleźć inny sposób konfiguracji strony.

@media print { 

    div { float: none !important; position: static !important; display: inline; 
      box-sizing: content-box !important; 
    } 

} 

Answer 8

Istnieje rozwiązanie, jeśli rodzic unoszą się. W przypadku elementu, do którego zastosowano podział strony, należy przepełnić element: ukryty. To wszystko. To zadziałało dla mnie.

<div style='float:left'> 

<p style='overflow:hidden;page-break-before:always;'></p> 

</div>