CSS pagina-break-after e float non stanno giocando bene?

Se ho il seguente codice HTML:CSS pagina-break-after e float non stanno giocando bene?

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

voglio una parola da stampare su ogni pagina, con un'interruzione di pagina dopo ogni uno. (Questo è codice semplificato - nella mia pagina web attuale, i float sono importanti.)

Firefox stampa questo bene, ma sia IE che Safari li stampano tutti su una pagina, ignorando le interruzioni di pagina. È un bug in quei browser? C'è un modo migliore per farlo?

Grazie.

fonte

2010-10-07 Colen

Quale versione di IE stai utilizzando? Anche IE 8 ha problemi con questo: http://www.w3schools.com/CSS/pr_print_pageba.asp, quindi se si sta utilizzando uno più vecchio di IE8 che potrebbe essere il colpevole. –

Questo è IE8, e non sto usando né "left", "right", né "inherit", quindi non penso che l'avviso si applichi qui ...? – Colen

So che lo stai usando sempre, ma quando IE8 supporta solo 1 implementazione di questo, è probabile che IE7 fallisca. –

Sono i galleggianti che stanno incasinando per la stampa.

Ti servono i galleggianti per la stampa? o sono float necessari solo per il web?

perché chiedo è che si può avere diverse classi CSS per diversi media (stampa, schermo) http://www.w3.org/TR/CSS2/media.html

Così il vostro galleggiante può essere sul supporto schermo - che mostrerà solo per il web. Mentre vorrai che la tua interruzione di pagina venga mostrata solo per i supporti di stampa.

Ecco un esempio utilizzando il supporto di: (nota quando si fa riferimento CSS è possibile scegliere multimediale tramite un attributo)

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

Aggiornamento:

sarà questo lavoro per che cosa avete bisogno? Ti mostra un 3x3 su ogni pagina quando stampi. Ma sullo schermo è un 3x6. Campione veloce

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

fonte

2010-10-07 22:34:25

Sfortunatamente i float sono necessari per la stampa - Voglio che ogni div sia stampato fianco a fianco, e poi rompere dopo il 9 (dato che sono in una griglia 3x3 sulla pagina). C'è qualcosa che posso fare per aggirare l'interazione di flottante/interruzione di pagina? – Colen

Ieri ho passato un po 'cercando di capire come ottenere quello fatto in IE (7-9beta). Sembra che ogni volta che galleggia su quell'elemento lo farà. Ho avuto un po 'di fortuna nel mettere il page-break-after su altri elementi che circondano i galleggianti e dentro i galleggianti, ma il risultato non è sempre stato "stellare". –

Aggiornamento della risposta. Questo funzionerà in IE. circonda solo i tuoi 3x3 con un div che ha il page-break-after. –

CSS pagina-break-after e float non stanno giocando bene?

risposta

Problemi correlati