Pause CSS page et flotter ne joue pas bien?

Si j'ai le code HTML suivant:Pause CSS page et flotter ne joue pas 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>

Je veux un mot à imprimer sur chaque page, avec un saut de page après chacun. (Ce code est simplifié - dans ma page Web actuelle, les flottants sont importants.)

Firefox imprime cette amende, mais IE et Safari les impriment tous sur une page, en ignorant les sauts de page. Est-ce un bug dans ces navigateurs? Y a-t-il une meilleure manière de faire cela?

Merci.

Source

2010-10-07 Colen

Quelle version d'IE utilisez-vous? Même IE 8 a des problèmes avec ceci: http://www.w3schools.com/CSS/pr_print_pageba.asp donc si vous utilisez un plus vieux que IE8 qui pourrait être le coupable. –

C'est IE8, et je n'utilise pas "left", "right", ou "inherit", donc je ne pense pas que cet avertissement s'applique ici ...? – Colen

Je sais que vous utilisez toujours, mais quand IE8 prend en charge seulement 1 implémentation de cela, il est probable que IE7 échouerait. –

Ce sont les flotteurs qui le gâchent pour l'impression.

Avez-vous besoin des flotteurs pour l'impression? ou les flotteurs sont-ils seulement nécessaires pour le web?

Pourquoi je demande est que vous pouvez avoir des classes CSS pour différents médias (presse écrite, écran) http://www.w3.org/TR/CSS2/media.html

donc votre flotteur peut être sur le support d'écran - qui montreront que pour le Web. Bien que vous souhaitiez que votre page ne s'affiche que pour les médias imprimés.

Voici un exemple en utilisant les médias: (note lors du référencement CSS, vous pouvez choisir les supports via un attribut)

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

Mise à jour:

Est-ce que ce travail pour ce dont vous avez besoin? Vous donne un 3x3 sur chaque page lors de l'impression. Mais à l'écran c'est un 3x6. Échantillon rapide.

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

Source

2010-10-07 22:34:25

Malheureusement, les floats sont nécessaires pour l'impression - je veux que chaque div soit imprimé côte à côte, puis se casse après le 9 (car ils sont dans une grille 3x3 sur la page). Y a-t-il quelque chose que je puisse faire pour contourner l'interaction mauvais flotteur/saut de page? – Colen

J'ai passé un peu hier à essayer de comprendre comment faire cela dans IE (7-9beta). IL semble que chaque fois que ce flotteur est sur cet élément, il le fera. J'ai eu un peu de chance en mettant la page en pause sur d'autres éléments entourant les chars et à l'intérieur des flotteurs, mais le résultat n'était pas toujours «stellaire». –

Mise à jour de la réponse. Celui-ci fonctionnera dans IE. il suffit d'entourer votre 3x3 avec un div qui a le saut de page. –

Pause CSS page et flotter ne joue pas bien?

Répondre

Questions connexes