Druckvorschau squishing Inhalt

Question

Ich versuche die Druckvorschau so zu drucken, wie ich es möchte, indem ich die @page-Direktive in CSS verwende. Aus irgendeinem Grund, egal, auf welche Seitenränder ich eingestellt bin, wird der Inhalt gequetscht, selbst wenn die Zahlen angeblich genau sind. Hier ist ein Beispiel zu testen:

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

Wenn Sie öffnen Druckvorschau auf dieser Seite (Ich bin in Chrom testen), werden Sie sehen, dass die Karten sind wild nicht in der Mitte. Hier ist die Sache, obwohl - meine Karten sind auf 2,5 Zoll von 3,5 Zoll gesetzt, und die Seite selbst ist auf 8,5 Zoll von 11 Zoll eingestellt. Das heißt, ich sollte ungefähr 1 Zoll Rand zwischen dem linken und dem rechten Rand und 0,5 Zoll Rand oben und unten haben, was bedeutet, dass logisch meine Ränder für jede Seite halbiert werden sollten. Allerdings, wenn ich das wirklich tun, sieht es zerquetscht:

Hier ist mein @page CSS:

@media print { 
    html, body, .printable, .results-pane, .embed-view { 
     width: 8.5in !important; 
     height: 11in !important; 
    } 

    @page { 
     size: 8.5in 11in; 
     margin-top: 0.25in; 
     margin-left: 0.5in; 
     margin-right: 0.5in; 
     margin-bottom: 0.25in; 
    } 
    } 

Das Problem besteht auch dann, wenn ich die Ränder manuell einzustellen versuchen, und mit diesem Sie können sogar sehen, dass mein Inhalt gequetscht wird. Hier ist, wie es mit absolut keine Margen sieht (Verlassen der 1in und 0.5in Margen zur Verfügung:

Und hier ist, wie es aussieht, wenn ich die Ränder selbst gesetzt:

Gibt es Eine Möglichkeit, den Browser daran zu hindern, dieses Squishing-Verhalten durchzuführen, oder meine @ print-Abfrage zu verwenden, um dies zu beheben Als Referenz habe ich versucht, die Ränder für den Körper selbst festzulegen, aber die oberen/unteren Ränder bleiben nicht bestehen Druckseiten

Answer 1

Wie es der Zufall wollte, ist dies tatsächlich ein Problem mit der ersten Medien Abfrage:

html, body, .printable, .results-pane, .embed-view { 
    width: 8.5in !important; 
    height: 11in !important; 
} 

Da diese alle werden Auf die gleiche Größe eingestellt, drücken sie sich gegenseitig aus. Die Auflösung war einfach html die richtige Breite/Höhe zu machen und alles sorta fiel von da an richtig aus.

Answer 2

Ist es möglich, die überschüssige enge Klammer bricht Ihre CSS?

@page { 
    size: 8.5in 11in; 
    margin-top: 0.25in; 
    margin-left: 0.5in; 
    margin-right: 0.5in; 
    margin-bottom: 0.25in; 
} 

}/* < - extra Halterung */