CSS page-break-after i float nie grają ładnie?

Jeśli mam następujący kod HTML:CSS page-break-after i float nie grają ładnie?

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

chcę jedno słowo, drukowany na każdej stronie, z przerwą strony po każdym z nich. (To jest uproszczony kod - na mojej faktycznej stronie pływające są ważne.)

Firefox drukuje to dobrze, ale zarówno IE, jak i Safari wydrukują je wszystkie na jednej stronie, ignorując podziały strony. Czy to błąd w tych przeglądarkach? Czy jest lepszy sposób to zrobić?

Dzięki.

Źródło

2010-10-07 Colen

Jaką wersję IE używasz? Nawet IE 8 ma problemy z tym: http://www.w3schools.com/CSS/pr_print_pageba.asp, więc jeśli używasz jednego starszego niż IE8, który może być winowajcą. –

To jest IE8 i nie używam ani "lewej", "prawej", ani "dziedziczącej", więc nie sądzę, że ostrzeżenie dotyczy tutaj ...? – Colen

Wiem, że używasz zawsze, ale kiedy IE8 obsługuje tylko 1 implementację tego, są szanse, że IE7 zawiedzie. –

To pływaki zmywają go do drukowania.

Czy potrzebujesz tam pływaków do drukowania? lub czy pływaki są potrzebne tylko w Internecie?

Dlaczego pytam to można mieć różne klasy CSS dla różnych mediów (prasa, ekran) http://www.w3.org/TR/CSS2/media.html

Więc pływak może być na nośnikach ekranu - pokaże tylko dla sieci web. Mimo że chcesz, aby strona była wyświetlana tylko dla mediów drukowanych.

Oto przykład przy użyciu nośnika (Uwaga: przy odwoływaniu CSS można wybrać nośnik za pomocą atrybutu)

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

Aktualizacja:

Będzie to działać, czego potrzebujesz? Zapewnia 3 x 3 na każdej stronie podczas drukowania. Ale na ekranie jest to 3x6. Szybka próbka.

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

Źródło

2010-10-07 22:34:25

Niestety do drukowania potrzebne są zmiennoprzecinkowe - chcę, aby każdy element div był drukowany obok siebie, a następnie łamany po 9 (ponieważ znajdują się w siatce 3x3 na stronie). Czy jest coś, co mogę zrobić, aby obejść interakcję złego float/interwału strony? – Colen

Spędziłem wczoraj trochę próbując dowiedzieć się, jak to zrobić w IE (7-9beta). Wydaje się, że za każdym razem, gdy pływający jest na tym elemencie, będzie to robić. Miałem trochę szczęścia umieszczając stronę-break-after na innych elementach otaczających pływaki i wewnątrz pływaków, ale wynik nie zawsze był "gwiezdny". –

Zaktualizowano odpowiedź. Ten będzie działał w IE. po prostu otaczaj swoje 3x3 za pomocą div, który ma stronę-break-after. –

CSS page-break-after i float nie grają ładnie?

Odpowiedz

Powiązane problemy