Firefox printing only 1st page

Question

Estoy trabajando en imprimir mis css para un sitio web. Muestra/imprime perfectamente en IE, pero Firefox (versión 3.6) solo muestra/imprime la primera página.

¿Alguien está enterado de algo que generalmente causaría esto? El marcado es bastante complicado, ¡así que no estoy seguro de por dónde empezar!

Gracias.

Editar

Esta solución sólo empeoró las cosas.

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

Parece que la impresión es un asco en FF. Al cliente no le gustará escuchar eso. ¡Ojalá no usen FF!

Answer 1

El long-standing bug with printing absolutely-positioned elements se fijó en Firefox 3.

Los problemas con las páginas que faltan son rastreados en bug 521204 (mirar a través del "depende de" la lista). ¿Tiene marcos o tablas largas en la página que intenta imprimir?

Y sí, la impresión en Firefox está bajo de propiedad, lo siento que tiene que tratar con él ...

Answer 2

Si usted es incapaz de superar las limitaciones de Firefox en la impresión, se puede convertir la página en un archivo PDF. Si estás listo para esa opción, Prince XML es una biblioteca que recomiendo encarecidamente. Tiene muy buena compatibilidad con CSS, incluidos los medios impresos.

Answer 3

Firefox ciertamente NO apesta en ningún aspecto. Sin embargo, a veces se adhiere más estrictamente a los estándares que otros navegadores. De todos modos, para ir al grano, tuve el mismo problema, es decir, firefox estaba imprimiendo (también previsualizando) solo las primeras 2 páginas de un informe de varias páginas, construido con una tabla larga, producida por una página web mía. Después de algunas depuraciones descubrí que había incluido la mayor parte del contenido del informe dentro de un elemento span con un estilo de {display: inline-block;} entre otras cosas. Tan pronto como me quita que la paginación era perfecto ...

Answer 4

Me acabo de enterar, que a partir de un elemento con

display:inline-block; 

sólo la primera página se imprime y todo lo demás está oculto. estableciendo esto en

display:block; 

fue la solución en mi caso.

Answer 5

Estaba teniendo el mismo problema. Resulta que la etiqueta raíz tenía display: flex en ella. Después de cambiar esto a display: block, se mostró el resto del contenido. Recomiendo subir tu árbol DOM y verificar cada atributo display.

Answer 6

Si no quiere pasar por todo el código, esto es lo único que he encontrado que funciona para mí, sin echar a perder toda mi otra CSS:

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

Answer 7

probé una docena de correcciones para este y, al final, todo lo que necesitaba era:

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

Answer 8

que tenían el mismo problema porque el height de body se establece en 100%, después de que modificara a height: auto en mi print.css, funcionó.

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

Answer 9

Después de mucha investigación y error juicio &, he encontrado this article de una lista aparte. Yo era escéptico porque es muy antiguo, pero se afirma que:

Si un elemento flotante se extiende más allá de la parte inferior de una página impresa, el resto del flotador desaparecerán con eficacia, ya que no se imprime en la siguiente página.

Como tengo un gran contenedor flotante pensé que lo probaría. Por lo tanto, hice una mezcla de otras respuestas y este artículo y se acercó con esto:

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

Así que, básicamente:

1. cuerpo Configuración de overflow: visible
2. elementos de ajuste que se comportan como envolturas para display: block, eliminar todos los estilos flex y restablecer la altura si es necesario
3. Eliminar float en contenedores largos

¡Esa combinación funcionó para mí! Estoy tan feliz que pensé en compartir :)

Answer 10

Tuve el mismo problema y cambié la posición de position:relative a position: absolute con height: 100% desde la parte superior div hacia abajo.