Firefox drukuje tylko pierwszą stronę i przecina stronę po prawej

Question

Miałem duże problemy z drukowaniem z Firefoksa (dowolna wersja, moja to 16.0.2, ale nawet kompilacje Dev'a z Aurory zrobiły to samo). Podczas drukowania strony, zmniejszanie, aby zmieścić się w podglądzie wydruku, nie działa. Jedynym sposobem dopasowania strony do papieru jest zaznaczenie opcji Powiększ 70% w tym samym oknie dialogowym. Inny problem: drukuje tylko pierwszą stronę. Co robić?

Answer 1

Potrzebowałem dostosować plik CSS do drukowania, więc zrobiłem jeden. Działa bez zarzutu w dowolnym miejscu, ale nie w Firefoksie. W czym problem?

Najpierw próbowałem określać szerokość i wysokość dla BODY i HTML w pliku print.css. Niż marże itd

Później zorientowali się, na czym polega problem: standardowy plik CSS miał następujące w nim:

body { 
... 
overflow-x: hidden; 
overflow-y: scroll; 
} 

Więc dodałem następujące do pliku print.css:

body { 
overflow-x: visible; 
overflow-y: visible; 
} 

Chyba, gdybyś tylko przepełnienie określone w CSS, nie -x & -y, trzeba by było określić tylko overflow: visible w pliku print.css.

Drukowanie z Firefoksa działa teraz tak, jak powinien. Po prostu pomyślałem, że może to pomóc komuś, kto ma dziwne zachowanie drukowania w Firefoksie.

Answer 2

Ponadto odpowiedzieć na Kokesh, niektóre czasy przypisują

display: table 

generuje ten problem zbyt. Musisz więc zmienić go na "blok" lub inny, który pasuje do twoich potrzeb.

Answer 3

Próbowałem poprawek sugerowanych w innych odpowiedziach, ale nie rozwiązały problemu dla mnie. Po wielu badaniach i próbnym błędzie & znalazłem this article według listy osobno. Byłem sceptyczny, bo to jest tak stary, ale stwierdza, że:

Jeśli Floated elementem przebiega obok dolnej części drukowanej strony, reszta pływaka skutecznie zniknąć, ponieważ nie zostaną wydrukowane na następny strona.

Ponieważ mam duży pływający pojemnik, pomyślałem, że spróbuję. Tak, zrobiłem mieszankę z innych odpowiedzi i ten artykuł i podszedł z tym:

body { 
    overflow: visible !important; 
    overflow-x: visible !important; 
    overflow-y: visible !important; 
} 

/*this is because I use angular and have this particular layout*/ 
body > .fade-ng-cloak { 
    height: 100%; 
    display: block; 
    flex: none; 
    float: none; 
} 
.l-content, 
.l-sidebar { 
    float: none; 
} 

więc zasadniczo:

1. Ustawienie ciała overflow: visible
2. elementy ustawienie, które zachowują się jak owijarki do display: block , usuń wszystkie style i zresetuj wysokość, jeśli to konieczne.
3. Wyeliminuj float na długich pojemnikach

Ten mix zadziałał dla mnie! Jestem taki szczęśliwy, że myślałem, że się podzielę :)