Solo per la stampa di Firefox 1a pagina

Question

Sto lavorando su css di stampa amichevole per un sito web. Prevede/stampa perfettamente in IE, ma Firefox (versione 3.6) mostra solo le anteprime/stampa la prima pagina.

Qualcuno è a conoscenza di qualcosa che generalmente causerebbe questo? Il markup è abbastanza complicato, quindi non sono sicuro da dove cominciare!

Grazie.

Modifica

Questa soluzione solo peggiorato le cose.

https://support.mozilla.com/ga-IE/questions/667285#answer-115916

Sembra stampa succhia solo in FF. Al cliente non piacerebbe sentirlo - speriamo che non usino FF!

Answer 1

Il long-standing bug with printing absolutely-positioned elements è stato fissato in Firefox 3.

I problemi con le pagine mancanti sono tracciati in bug 521204 (guardare attraverso il "dipende" lista). Hai fotogrammi o lunghi tavoli sulla pagina che stai tentando di stampare?

E sì, la stampa in Firefox è sotto di proprietà, mi dispiace hai a che fare con esso ...

Answer 2

Se non si riesce a superare i limiti di Firefox sulla stampa, è possibile convertire la pagina in un file PDF. Se sei pronto per quell'opzione, Prince XML è una libreria che consiglio vivamente. Ha un ottimo supporto CSS che include i supporti di stampa.

Answer 3

Firefox non fa certo schifo. Tuttavia, a volte aderisce più strettamente agli standard rispetto ad altri browser. Ad ogni modo, per andare al sodo, ho avuto lo stesso problema, ad esempio firefox stava stampando (anche in anteprima) solo le prime 2 pagine di un rapporto multipagina, costruito con un lungo tavolo, prodotto da una mia pagina web. Dopo alcuni debug ho scoperto che avevo incluso la maggior parte del contenuto del report all'interno di un elemento span con uno stile {display: inline-block;} tra le altre cose. Non appena ho rimosso che l'impaginazione è stato perfetto ...

Answer 4

ho appena scoperto, che da un elemento con

display:inline-block; 

solo la prima pagina viene stampata e everthing il resto è nascosto. impostandolo su

display:block; 

era la soluzione nel mio caso.

Answer 5

Avevo lo stesso problema. Risulta, il tag radice aveva display: flex su di esso. Dopo averlo modificato a display: block, veniva visualizzato il resto del contenuto. Ti consigliamo di risalire il tuo albero DOM e controllare ogni attributo display.

Answer 6

Se non si vuole passare attraverso tutto il codice, questa è l'unica cosa che ho trovato che funziona per me senza dover mettere tutto il mio altro CSS:

@media print { 
    body { 
    overflow: visible !important; 
    } 
} 

Answer 7

ho provato un dozzina di correzioni per questo e, alla fine, tutto quello che dovevo era:

@media print { 
    body { 
    display: block; 
    } 
} 

Answer 8

ho avuto lo stesso problema, perché il height di body è impostato su 100%, dopo che ho modificato per height: auto nel mio print.css, ha funzionato.

@media print { 
    body { 
    height: auto; 
    } 
} 

Answer 9

Dopo un sacco di ricerca e l'errore di prova &, ho trovato this article da un elenco 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 da 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 azzerare l'altezza se necessario
3. Eliminare float su contenitori lunghi

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

Answer 10

Ho avuto lo stesso problema e ho sostituito la posizione da position:relative a position: absolute con height: 100% dal div superiore al fondo.