web-dev-qa-db-fra.com

Saut de page CSS ne fonctionne pas dans tous les navigateurs

J'ai du mal à faire fonctionner cela dans la plupart des navigateurs, sauf pour IE (cela fonctionne même correctement dans IE6) et Opera.

Firefox sépare correctement les divs mais n'imprime que la première page.

Chrome et Safari n'appliquent le saut de page qu'à la dernière div.

Comment puis-je faire fonctionner cela correctement sur tous les navigateurs?

Le HTML:

<div id="leftNav">
  <ul>
    <!--links etc-->
  </ul>
</div>
<div id="mainBody">
 <div id="container">
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
  <div class="pageBreak">
   <!--content-->
  </div>
 </div>
</div>

Les divs avec les ID #leftNav et #mainBody sont définis sur float:left, donc ils s'affichent bien.

Je veux seulement imprimer le .pageBreak classes, masquant le #leftNav et le reste du #mainBody avec CSS.

Le CSS:

@media print
{
 #leftNav
 {
  display:none;
 }
 #mainBody
 {
  border:none;
  margin:none;
  padding:none;
 }
}
csspage-break
47
Richard Parnaby-King

Les éléments parents ne peuvent pas avoir de flotteur sur eux.

Réglage float:none sur tous les éléments parents fait page-break-before:always fonctionne correctement.

Les autres éléments qui peuvent rompre le saut de page sont: l'utilisation du saut de page à l'intérieur des tableaux, des éléments flottants, des éléments de bloc en ligne et des éléments de bloc avec des bordures.

90
Richard Parnaby-King

Par souci d’achèvement et pour le bénéfice d’autres personnes qui ont le même problème, je veux juste ajouter que j’ai également dû ajouter overflow: visible à la balise body pour que FireFox obéisse aux sauts de page et même imprime plus que la première page.

28
Vincent

J'ai trouvé que Twitter Bootstrap ajoutent un tas de choses à la page, ce qui a rendu difficile le fonctionnement des sauts de page. Firefox a fonctionné tout de suite, mais j'ai dû suivre divers suggestions pour le faire fonctionner en Chrome et, enfin, IE (11).

J'ai suivi les suggestions ici et ailleurs. La seule propriété que j'ai "découverte" que je n'ai pas encore vue mentionnée est le "dimensionnement de boîte". Bootstrap peut définir cette propriété sur "box-sizing: border-box", ce qui a cassé IE. Un paramètre convivial pour IE est "box-sizing: content-box". J'ai été amené à cela par la mise en garde sur les "éléments de bloc avec des bordures" faite par Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752 .

On dirait que c'est un peu une course aux armements pour découvrir la prochaine propriété qui pourrait casser les sauts de page.

C'est le paramètre qui a fonctionné pour moi (Chrome, FF, IE 11). Fondamentalement, il essaie de remplacer tous les paramètres problématiques sur toutes les divs sur la page imprimée. Bien sûr, cela pourrait aussi casser votre mise en forme, et cela signifierait que vous devrez trouver une autre façon de configurer la page.

@media print {

    div { float: none !important; position: static !important; display: inline; 
          box-sizing: content-box !important;
    }

}
16
Yuri

Bien que cela ne soit pas bien documenté, il convient de noter que les propriétés de saut de page ne peuvent pas être appliquées aux éléments de table. Si vous avez des éléments qui ont un display: table; ou display:table-cell; leur est appliqué (commun dans de nombreux modèles de la classe clearfix), puis les éléments contenus ignoreront les règles de saut de page. Annulez simplement la règle dans votre feuille de style d'impression et vous devriez être OK (après que les flotteurs ont également été supprimés, bien sûr).

Voici un exemple de la façon de procéder pour le problème de clearfix populaire.

.clearfix:before, .clearfix:after{  
    display: block!important;
}

L'autre endroit où j'ai rencontré ceci est lorsque le modèle a déclaré la page entière (généralement appelée main ou wrapper principal) avec display:inline-block;

Si la section est à l'intérieur d'un bloc en ligne, cela ne fonctionnera pas, alors gardez les yeux ouverts pour ceux-ci également. Modification ou écrasement display:inline-block; avec display:block devrait marcher.

7
techdude

Il existe une solution si le parent a float. Pour l'élément auquel vous avez appliqué le saut de page, faites déborder l'élément: masqué. C'est tout. Ça a marché pour moi.

<div style='float:left'>

<p style='overflow:hidden;page-break-before:always;'></p>

</div>
5
Sarath Mohan

"Les versions de Firefox jusqu'à 3.5 incluses ne prennent pas en charge les valeurs à éviter, à gauche ou à droite." IE le support est également partiel, vous pouvez obtenir ce dont vous avez besoin en: saut de page avant: toujours; qui est pris en charge dans tous les navigateurs "mais n'imprime que la première page": je ne pense pas que ce soit lié au CSS, je suppose que c'est quelque chose sur la fenêtre d'impression du navigateur :)

5
sepehr

J'ai eu un position: absolute; dans l'impression div qui a empêché cela de fonctionner.

5
ade jones

quel est ton code?
comme ça?:


<style>
@media print
{
table {page-break-after:always}
}
@media print
{
table {page-break-before:always}
}
</style>
3
Mohammad Ali Akbari