fit content canisue css page-break

content - css browser compatibility



CSS Page-Break no funciona en todos los navegadores (8)

Tengo problemas para que esto funcione en la mayoría de los navegadores, excepto para IE (incluso funciona correctamente en IE6) y Opera.

Firefox separa los divs correctamente pero solo imprime la primera página.

Chrome y Safari solo aplican el salto de página al último div.

¿Cómo puedo hacer que esto funcione en todos los navegadores correctamente?

El 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>

Los divs con los identificadores #leftNav y #mainBody están configurados para float:left , por lo que se muestran muy bien.

Solo quiero imprimir las clases .pageBreak , ocultando el #leftNav y el resto de #mainBody con CSS.

El CSS:

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

¿Cuál es tu código?
¿Me gusta esto?:

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

Aunque esto no está documentado de forma destacada, se debe tener en cuenta que las propiedades de salto de página no se pueden aplicar a los elementos de la tabla. Si tiene elementos que tienen una display: table; o display:table-cell; aplicado a ellos (común en muchas plantillas bajo la clase clearfix) entonces los elementos contenidos ignorarán las reglas de salto de página. Simplemente cancele la regla en su hoja de estilo de impresión y debería estar bien (¡después de que las carrozas también hayan sido eliminadas, por supuesto!).

Aquí hay un ejemplo de cómo hacer esto para el popular problema de corrección.

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

EDITAR: Olvidé agregar que el otro lugar donde me encontré con esto es cuando la plantilla declaró toda la página (normalmente llamada envoltorio principal o principal) con display:inline-block;

Si la sección está dentro de un bloque en línea, no funcionará, así que mantén los ojos abiertos para eso también. Cambio o sobreescritura de la display:inline-block; con display:block debería funcionar.

¡Espero que esto ayude!

~ techdude

Descubrí que las clases de Twitter Bootstrap agregan un montón de cosas a la página, lo que ha dificultado el funcionamiento de las pausas de página. Firefox funcionó de inmediato, pero he tenido que seguir varias sugerencias para que funcione en Chrome y, finalmente, IE (11).

Seguí las sugerencias aquí y en otros lugares. La única propiedad que "descubrí" que no he visto aún es "tamaño de caja". Bootstrap puede establecer esta propiedad en "tamaño de caja: border-box", que rompió IE. Una configuración amigable para IE es "tamaño de caja: cuadro de contenido". Fui guiado a esto por la advertencia sobre "elementos de bloque con bordes" hecha por Richard Parnaby-King https://.com/a/5314590/3397752 .

Parece que es una carrera de armamentos para descubrir la siguiente propiedad que podría romper las páginas.

Esta es la configuración que funcionó para mí (Chrome, FF, IE 11). Básicamente, intenta anular todas las configuraciones problemáticas en todos los divs en la página impresa. Por supuesto, esto también podría interrumpir su formateo, y eso significaría que tendrá que encontrar otra forma de configurar la página.

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

Hay una solución si el padre tiene float. Para el elemento al que aplicó el salto de página, haga que el elemento se desborde: oculto. Eso es todo. Funcionó para mí

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

Los elementos principales no pueden flotar en ellos.

Configuración de float:none en todos los elementos principales hace que page-break-before:always funcione correctamente.

Otras cosas que pueden romper el salto de página son: el uso de páginas dentro de tablas, elementos flotantes, elementos de bloque en línea y elementos de bloque con bordes.

Para completar, y para el beneficio de otros que están teniendo el mismo problema, solo quiero agregar que también tuve que agregar el overflow: visible en la etiqueta del cuerpo para que FireFox obedezca los saltos de página e incluso para imprimir más que solo la primera página.

Tenía una position: absolute; en la impresión div que hizo que esto no funcionara.