¿Qué navegadores soportan la manipulación de salto de página usando CSS y el elemento page-break-inside?

Question

Estoy tratando de usar la directiva CSS de salto de página, cuya clase debe adjuntarse a una etiqueta div o una etiqueta de tabla (creo que esto solo puede funcionar en elementos de bloque, en cuyo caso tendría ser la mesa).

He intentado todos los tutoriales que supuestamente describen exactamente cómo hacer esto, pero nada funciona. ¿Es esta una cuestión del apoyo navegador o no alguien realmente conseguido este trabajo, el bit exacto de CSS se ve así:

@media print { 

    .noPageBreak { 
    page-break-inside : avoid; 
    } 
} 

Answer 1

Safari 1.3+, Opera 9.2+, Konquerer, y IE8 todo el apoyo que, al menos hasta cierto grado.

Firefox aparentemente todavía no.

Answer 2

Intento utilizar la directiva CSS de salto de página, cuya clase debe adjuntarse a una etiqueta div o una etiqueta de tabla (creo que esto solo puede funcionar en elementos de bloque, en los que caso, debería ser la mesa).

En primer lugar, no hay necesidad de adivinar. Solo mira the specification, y verás que solo se aplica a elementos de nivel de bloque.

En segundo lugar, <div> elementos son generalmente elementos de nivel de bloque, por lo que no hay problema aplicando page-break-inside a un elemento <div>.

Finalmente, no necesita envolverlo en @media. Solo necesita @media si desea aplicar reglas independientes de los medios a un solo medio, por ejemplo, si desea usar display: block solo para un medio. En este caso, no necesita ocultar esas reglas de otros medios, porque de todos modos se aplicarán a los medios de búsqueda.

Answer 3

Safari 1.3 and later compatibilidad page-break-inside.

So does Konqueror.

Answer 4

Safari 1.3 y posterior (no sé de 4) do no support page-break-inside (pruébelo, o vea aquí: http://reference.sitepoint.com/css/page-break-inside). Tampoco lo hacen Firefox 3 o IE7 (no sé de 8).

En un sentido práctico, el soporte para este atributo es TAN irregular, no tiene sentido usarlo en este punto. Tendría suerte si incluso el 10% de sus visitantes tienen navegadores que pueden soportar esto.

La solución que utilicé fue añadir

page-break-after:always

a ciertos divs, o añadir una "página automático" div en la que desea descansos. Esto es bastante torpe, lo sé, porque no hace exactamente lo que quiere, y hace que el contenido no llegue al final de la página impresa, pero lamentablemente no hay una solución mejor (¡demuéstrame que estoy equivocado!).

Otro enfoque es crear una hoja de estilo que elimine todos los elementos extraños (display:none) y haga que el contenido principal fluya en una columna principal. Básicamente, conviértalo en una sola columna, documento de solo texto.

Por último, evite los flotadores y las columnas al diseñar impresoras, ya que puede hacer que IE (y FF) actúen de forma extraña.

Answer 5

A partir de las búsquedas preliminares, es difícil encontrar estadísticas actualizadas sobre la compatibilidad del navegador para esto, pero parece que Firefox 4beta6 lo admite y Chrome 7 no. Chrome también divide las páginas a la mitad de una línea de texto, de modo que parte del texto aparece en una página y parte aparece en la siguiente. Falta de atención poco característica en los detalles, pero supongo que ni Google ni Apple se preocupan por imprimir cosas.

Firefox 4 también agrega algunos buenos encabezados y pies de página a sus impresiones con url, título de la página, título del sitio, número de páginas y tiempo. Bonito.

Answer 6

• Firefox does not support this partir de 2010-11-30, y por lo tanto no constituirá en Firefox 4.
• IE8 does support page-break-inside: avoid - pero cuando intenté esto en IE9, que no es muy exitosa a evitar páginas-breaks (esto puede ser una regresión, o quizás IE8 también solo es capaz de evitar saltos de página en casos muy simples).
• AFAIK no funciona en ningún navegador webkit; ciertamente no en cromo.
• Actualmente funciona en Opera, incluso en sitios reales.

Answer 7

Como un poco más de información además de Eamon Nerbonne's answer en la representación de IE (IE8 +), debe asegurarse de que el navegador esté en modo estándar. This article on MSDN muestra lo que es necesario - que incluye una etiqueta meta en tu html para forzar la situación:

<meta http-equiv="X-UA-Compatible" content="IE=8" /> 

Se siente kludgy, pero ahí lo tienen ... parece funcionar de manera más consistente.