CSS page-break-after y float no funcionan bien?

Si tengo el siguiente código HTML:CSS page-break-after y float no funcionan bien?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
     <title>Test</title> 
    </head> 
    <body> 
     <div style="page-break-after: always; float: left;">hello</div> 
     <div style="page-break-after: always; float: left;">there</div> 
     <div style="page-break-after: always; float: left;">bilbo</div> 
     <div style="page-break-after: always; float: left;">baggins</div> 
    </body> 
</html>

Quiero una palabra que se desea imprimir en cada página, con un salto de página después de cada uno. (Este es un código simplificado - en mi página web real, las carrozas son importantes.)

Firefox imprime esto bien, pero tanto IE como Safari las imprimen todas en una página, ignorando los saltos de página. ¿Es esto un error en esos navegadores? ¿Hay una mejor manera de hacer esto?

Gracias.

Fuente

2010-10-07 Colen

¿Qué versión de IE estás utilizando? Incluso IE 8 tiene problemas con esto: http://www.w3schools.com/CSS/pr_print_pageba.asp así que si está usando uno anterior a IE8 que podría ser el culpable. –

Esto es IE8, y no estoy usando "izquierda", "derecha" o "heredar", así que no creo que la advertencia se aplique aquí ...? – Colen

Sé que está utilizando siempre, pero cuando IE8 solo admite 1 implementación de esto, es probable que IE7 falle. –

Son los flotadores los que están estropeando la impresión.

¿Necesita los flotadores para imprimir? o son flotadores solo necesarios para la web?

Por qué estoy pidiendo es que puede tener diferentes clases CSS para diferentes medios de comunicación (prensa, pantalla) http://www.w3.org/TR/CSS2/media.html

Así que su flotador puede estar en los medios de comunicación de pantalla - que mostrarán solamente para la web. Si bien querrá que su salto de página se muestre solo para los medios impresos.

Aquí hay un ejemplo usando los medios de comunicación: (nota al hacer referencia CSS se puede elegir los medios de comunicación a través de un atributo)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <title>Test</title> 
    <style> 
     @media print { 
     .myDiv { page-break-after: always; } 
     } 
     @media screen { 
     .myDiv {float:left;} 
     } 
    </style> 
    </head> 
    <body> 
    <div class="myDiv">hello</div> 
    <div class="myDiv">there</div> 
    <div class="myDiv">bilbo</div> 
    <div class="myDiv">baggins</div> 
    </body> 
    </html>

Actualización:

es que esto funciona para lo que necesita? Le muestra un 3x3 en cada página cuando imprime. Pero en la pantalla es un 3x6. Muestra rápida.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <title>Test</title> 
    <style>  
     .break 
     { 
        page-break-after: right; 
        width:700px; 
        clear:both; 
     } 
     .myDiv {  
     float:left; 
     width:200px; 
     height:100px; 
     background-color:blue; 
     margin:5px; 
     } 
     } 
    </style> 
    </head> 
    <body> 
    <div class="break"> 
     <div class="myDiv">1</div> 
     <div class="myDiv">2</div> 
     <div class="myDiv">3</div> 


     <div class="myDiv">4</div> 
     <div class="myDiv">5</div> 
     <div class="myDiv">6</div> 


     <div class="myDiv">7</div> 
     <div class="myDiv">8</div> 
     <div class="myDiv">9</div> 
    </div> 

    <div class="break"> 
     <div class="myDiv">11</div> 
     <div class="myDiv">22</div> 
     <div class="myDiv">33</div> 


     <div class="myDiv">44</div> 
     <div class="myDiv">55</div> 
     <div class="myDiv">66</div> 


     <div class="myDiv">77</div> 
     <div class="myDiv">88</div> 
     <div class="myDiv">99</div> 
    </div> 
    </body> 
    </html>

Fuente

2010-10-07 22:34:25

Lamentablemente, los flotadores son necesarios para imprimir: quiero que cada div se imprima uno al lado del otro y luego se rompa después del noveno (ya que están en una cuadrícula de 3x3 en la página). ¿Hay algo que pueda hacer para evitar la mala interacción flotación/pausa de página? – Colen

Pasé un poco el día de ayer intentando descubrir cómo hacerlo en IE (7-9beta). Parece que cada vez que ese flotador está en ese elemento, lo hará. Tuve un poco de suerte poniendo el salto de página sobre otros elementos que rodean las carrozas y dentro de las carrozas, pero el resultado no siempre fue "estelar". –

Actualizó la respuesta. Éste funcionará en IE. simplemente rodee su 3x3 con un div que tenga el salto de página después. –

CSS page-break-after y float no funcionan bien?

Respuesta

Cuestiones relacionadas