Je me suis penché là-dessus un peu plus et le problème semble être lié à l’atsortingbution de la width initial à la width page sous la règle du support d’ print . Il semble que dans Chrome width: initial de l’élément .page entraîne la mise à l’ échelle du contenu de la page si aucune valeur de longueur spécifique n’est définie pour la width sur l’un des éléments parent ( width: initial mais en réalité, toute valeur inférieure à la taille définie sous la règle @page provoque le même problème).

Ainsi, non seulement le contenu est trop long pour la page (d’environ 2cm ), mais le remplissage de la page sera légèrement supérieur aux 2cm initiaux et ainsi de suite (il semble que le contenu soit sous la width: auto à la largeur de ~196mm , puis redimensionnez tout le contenu jusqu’à la largeur de 210mm ~ mais, étrangement, le même facteur d’échelle est appliqué aux contenus de toute largeur inférieure à 210mm ).

Pour résoudre ce problème, vous pouvez simplement, dans la règle de support d’ print , affecter la largeur et la hauteur du papier A4 au html, body ou directement à .page et éviter dans ce cas le mot-clé initial .

DEMO

 @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ } 

^{Cela semble garder tout le rest comme il est dans votre CSS d’origine et corriger le problème dans Chrome (testé dans différentes versions de Chrome sous Windows, OS X et Ubuntu).}

CSS

 body { background: rgb(204,204,204); } page[size="A4"] { background: white; width: 21cm; height: 29.7cm; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } @media print { body, page[size="A4"] { margin: 0; box-shadow: 0; } } 

HTML

DEMO

https://github.com/cognitom/paper-css semble résoudre tous mes besoins.

Papier CSS pour une impression heureuse

Solution d’impression frontale – prévisualisable et rechargeable en direct!