css - tablas - page-break-after not working
¿Qué navegadores soportan la manipulación de salto de página usando CSS y el elemento page-break-inside? (7)
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 cuyo caso tendría que ser la mesa).
He probado todos los tutoriales que supuestamente describen exactamente cómo hacer esto, pero nada funciona. ¿Es esto un problema de compatibilidad con el navegador o alguien realmente lo ha hecho funcionar, el fragmento exacto de CSS se ve así:
@media print {
.noPageBreak {
page-break-inside : avoid;
}
}
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 cuyo caso tendría que ser la mesa).
En primer lugar, no hay necesidad de adivinar. Simplemente mire la especificación , y verá que, de hecho, solo se aplica a los elementos de nivel de bloque.
En segundo lugar, los elementos <div> generalmente son elementos de nivel de bloque, por lo que no hay problema para aplicar 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 la 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.
Safari 1.3+ , Opera 9.2+ , Konquerer e IE8 lo admiten, al menos hasta cierto punto.
Firefox aparentemente todavía no lo hace.
Safari 1.3 y versiones posteriores son compatibles con page-break-inside .
Safari 1.3 y posterior (no sé de 4) no son compatibles con 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 agregar
page-break-after:always
a ciertos divs, o agrega un divisor de "page-breaker" en donde quieras 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 desafortunadamente 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 las carrozas y las columnas al diseñar impresoras, puede hacer que IE (y FF) actúen de forma alocada.
A partir de las búsquedas preliminares, es difícil encontrar estadísticas actualizadas sobre el soporte 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.
- Firefox no es compatible con esto desde 2010-11-30, y por lo tanto no lo hará en Firefox 4.
- IE8 es compatible con page-break-inside: avoid , pero cuando probé esto en IE9, no es muy exitoso para evitar los saltos de página (esto puede ser una regresión, o tal vez IE8 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.
- En realidad funciona en Opera, incluso en sitios reales.
Como un poco más de información adicional a la respuesta de Eamon Nerbonne sobre la representación de IE (IE8 +), debe asegurarse de que el navegador esté en modo estándar. Este artículo en MSDN muestra lo que es necesario, incluida una metaetiqueta en su html para forzar el problema:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Se siente kludgy, pero ahí lo tiene ... parece funcionar de manera más consistente.