Wenn Maße für ein Element in cm oder Zoll angegeben werden, wird es in genau dieser Größe von Firefox und Internet Explorer gedruckt. Chrome hingegen macht die Elemente größer.
Gibt es überhaupt etwas, damit Chrome Dinge in genau der angegebenen Größe druckt, oder muss ich damit leben?
z. B.
%Vor%Der obige Code druckt in Firefox und IE exakt 5 cm (auf meinem Drucker), druckt aber bei etwa 5,5 cm aus Chrome.
Setzen Sie für Chrome einfach die Druckränder auf etwas und stellen Sie den Körper auf die Breite des Papiers abzüglich der Ränder ein.
z. Für eine A4-Seite beträgt die Breite 210 mm
Für 1 Zoll Ränder (ungefähr 2.5cm) können Sie das folgende tun
%Vor%Die linke, rechte und Breite des Körpers sollte bis zu 210 mm betragen.
Für den Brief würden Sie 1 Zoll Ränder und eine 6,5 Zoll Breite auf dem Körper verwenden.
Die Lösung mit einem 100% breiten div funktioniert bei mir auf der aktuellen Chrome-Version nicht, aber das funktioniert, für ein A4-Papier:
%Vor%Ich habe dieses Problem auch gefunden.
Nachdem ich mit VIELE verschwendetem Papier gespielt habe, habe ich festgestellt, dass Chrome versucht, den HTML-Code zu skalieren.
Fügen Sie Ihrem Beispiel unten beispielsweise ein DIV-Element mit voller Breite hinzu, damit es die Box korrekt skaliert, weil Sie Chrome bitten, die Box zu 100% zu formatieren und somit eine 1: 1-Skalierung der Seite zu erzwingen .
%Vor%Leider habe ich das Höhenproblem nicht behoben, aber ich konnte die Box 0px nicht machen, ohne dass die korrekte Skalierung verloren ging.
Sehen Sie sich übrigens Folgendes an, um zu zeigen, wie sich das beim Drucken auf die Größen auswirkt.
%Vor%Auf den Punkt gebracht: Die Druckfunktionen von Chrome sind schockierend!
Firefox funktioniert viel besser zum Drucken, aber läuft viel langsamer.
Ich habe bestätigt, dass ich das gleiche Problem bei der Verwendung von HTML hatte, auch wenn ich versuche, einige CSS-Regeln anzugeben, um offensichtliche Verdächtige wie Padding und Ränder zu entfernen. Aus den Recherchen, die ich gemacht habe, sieht es so aus, als würden Sie sich beim Rendern von Medienabfragen einfach mit inkonsistenten Browser-Standards auseinandersetzen. Wenn möglich, würde ich empfehlen, die Box bedingt per Browser zu gestalten.
Ein anderer Aspekt scheint zu sein, dass das Nichtspezifizieren eines Doctypes (was in der Entwicklung sowieso ein bisschen No-No ist) zu Inkonsistenzen führen kann.
Sie können weitermachen und sich dieses Thema ansehen, um weitere Informationen zu diesem Thema zu erhalten:
Firefox versus webkit Messungen für Medienabfragen basierend auf Breite
Tags und Links html css printing google-chrome