Firefox stampa solo la prima pagina e taglia la pagina a destra

Question

Ho avuto grossi problemi con la stampa da Firefox (qualsiasi versione, la mia è 16.0.2, ma anche le build di dev di Aurora hanno fatto lo stesso). Quando si stampa la pagina, l'opzione Riduci per rientrare nell'anteprima di stampa non funziona. Unico modo, come montare la pagina sulla carta è selezionare Zoom 70% nella stessa finestra di dialogo. Altro problema: stampa solo la prima pagina. Cosa fare?

Answer 1

Avevo bisogno di adattare il file CSS per la stampa, quindi ne ho fatto uno. Funziona perfettamente ovunque, ma non in Firefox. Qual'era il problema?

Per prima cosa ho provato a specificare Larghezza e altezza per BODY e HTML nel file print.css. Di margini, ecc

Più tardi ho capito qual era il problema: file CSS standard di aveva il seguente in esso:

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

Così ho aggiunto il seguente nel file print.css:

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

credo, se si aveva solo trabocco specificato nel CSS, non -x -y &, si avrebbe bisogno di specificare solo trabocco: visibile nel file print.css.

La stampa da Firefox funziona ora come dovrebbe. Ho solo pensato che questo potrebbe aiutare qualcuno, che ha strani comportamenti di stampa in corso in Firefox.

Answer 2

Oltre alla risposta del Kokesh, a volte attribuiscono

display: table 

genera anche questo problema. Quindi è necessario cambiarlo in 'blocco' o in un altro che si adatta ai tuoi requeriments.

Answer 3

Ho provato le correzioni suggerite in altre risposte ma non hanno risolto il problema per me. Dopo un sacco di ricerche e tentativi di errore &, ho trovato this article da una lista a parte. Ero scettico perché è così vecchio ma si afferma che:

Se un elemento flottato passa davanti alla parte inferiore di una pagina stampata, il resto del galleggiante sparirà, in quanto non verrà stampato sul prossimo pagina.

Come ho un grande contenitore flottato ho pensato di fare un tentativo. Così, ho fatto un mix dalle altre risposte e questo articolo e arrivato fino a questo:

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

Quindi, fondamentalmente:

1. corpo Impostazione per overflow: visible
2. elementi di regolazione che si comportano come wrapper per display: block , eliminare tutti gli stili flex e ripristinare l'altezza se necessario
3. Eliminare float su contenitori lunghi

Questo mix ha funzionato per me! Sono così felice che ho pensato di condividere :)