Pourquoi mes sauts de page CSS sont-ils incohérents entre les navigateurs ?

Prise en charge multi-navigateurs des sauts de page CSS

Malgré la reconnaissance généralisée de la propriété CSS de saut de page, les développeurs rencontrent souvent des incohérences entre les navigateurs lorsque tenter d'implémenter des sauts de page. Alors qu'Internet Explorer et Opera présentent un comportement fiable, Firefox sépare mais ne parvient pas à imprimer plusieurs pages, tandis que Chrome et Safari appliquent la coupure uniquement à la dernière page.

Résoudre le problème

Pour garantir la compatibilité entre navigateurs, il est crucial de remédier à un écueil courant : les éléments parents avec des valeurs flottantes. En réinitialisant float sur none sur tous les éléments parents, la propriété page-break-before:always fonctionnera correctement.

Considérations supplémentaires

Outre les problèmes de float, d'autres facteurs peut également perturber les sauts de page :

• Utiliser le saut de page dans les éléments du tableau
• Incorporer éléments flottants
• Utilisation d'éléments de bloc en ligne
• Utilisation d'éléments de bloc avec des bordures

CSS révisé pour la compatibilité entre navigateurs :

@media print {
  #leftNav {
    display: none;
  }
  #mainBody {
    float: none;
    border: none;
    margin: none;
    padding: none;
  }
  div.pageBreak {
    page-break-before: always;
  }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!