Wie behebt man A4-Druckausschnitte in Chrome mithilfe von CSS?

CSS zum Festlegen der A4-Papiergröße für präzises Drucken

Problem:

Einstellen der HTML-Elementgröße auf A4-Abmessungen (21 cm). x 29,7 cm) führt beim Drucken in Chrome zu Seitenbeschneidungen, obwohl sie im Browser korrekt angezeigt werden Fenster.

Analyse:

Chrome scheint insbesondere ein Problem mit der Zuweisung von „initial“ zur Seitenbreite in der Druckmedienregel zu haben. Dadurch wird der Inhalt etwas größer skaliert als die definierten A4-Abmessungen, was zum Abschneiden führt.

Lösung:

Um dieses Problem zu beheben, vermeiden Sie die Verwendung von „initial“. ' für die Seitenbreite in der Printmedienregel. Weisen Sie die A4-Abmessungen stattdessen explizit HTML, Text oder direkt dem „.page“-Element zu.

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
}

Durch die Festlegung fester Abmessungen bleibt der Inhalt innerhalb der A4-Grenzen und verhindert so ein Abschneiden. Dadurch wird das Problem in Chrome behoben, während die übrigen CSS-Stile erhalten bleiben.

Hinweis: Diese Änderung behebt das spezifische Problem bei der Behandlung von „initial“ für die Seitenbreite durch Chrome. Es ist jedoch wichtig, die Druckfunktionalität in verschiedenen Browsern zu testen, um Konsistenz und Genauigkeit der gedruckten Ausgabe sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie behebt man A4-Druckausschnitte in Chrome mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!