Wie kann ich die Standarddruckeinstellungen des Browsers mithilfe von CSS und JavaScript überschreiben?

Deaktivieren der standardmäßigen Browser-Druckeinstellungen für Ausdrucke von Webseiten

Viele Webentwickler haben nach Lösungen gesucht, um die standardmäßigen Browser-Druckeinstellungen speziell für zu ändern Kopfzeilen, Fußzeilen und Ränder. Ziel dieses Artikels ist es, ein umfassendes Verständnis der über CSS und JavaScript verfügbaren Optionen in verschiedenen Browsern zu vermitteln.

CSS-Lösung

Die @page-Direktive in CSS bietet erweiterte Formatierung Optionen für seitengebundene Medien wie Papier. Damit können Sie Druckerränder speziell für die Seite angeben, unabhängig von den Elementrändern.

@page {
    margin: 0mm;
}

Die Unterstützung dieser Anweisung variiert jedoch je nach Browser. Während Browser wie Safari, Internet Explorer, Opera und Chrome das Festlegen von Druckerseitenrändern unterstützen, unterstützt Firefox dies immer noch nicht.

Anpassen von Seitenumbrüchen und Inhaltsrändern

Zusätzlich zu Druckränder: Sie können Seitenumbrüche und Inhaltsränder mithilfe von CSS steuern, um Kopf- und Fußzeilen zu entfernen.

body {
    margin: 10mm 15mm 10mm 15mm;
}

Beim Drucken unterdrückt der Browser den Inhalt Bereiche, die durch die Ränder des Textkörpers festgelegt werden, wodurch die Kopf- und Fußzeile der Seite effektiv ausgeblendet wird. Beachten Sie jedoch, dass dies nur funktioniert, wenn der gedruckte Inhalt auf eine einzelne Seite passt.

Browserverhalten

Das Verhalten dieser Einstellungen unterscheidet sich von Browser zu Browser.

• Internet Explorer: Legt den richtigen Druckrand fest, zeigt jedoch die Kopf-/Fußzeile des Browsers mit undurchsichtigem Hintergrund an und verbirgt die Inhalt.
• Firefox: Positioniert den Inhalt korrekt, zeigt jedoch sowohl den Kopf-/Fußzeilentext des Browsers als auch den Inhaltstext an, was zu einer gemischten Anzeige führt.
• Opera: Blendet den Kopfbereich aus, aber der Rand ist nicht richtig eingestellt. Dies führt zu potenziellen Problemen mit der Sichtbarkeit der Kopfzeile.
• Chrome: Verbirgt die Kopf-/Fußzeile des Browsers, wenn der Seitenrand mit ihrer Position in Konflikt steht, und bietet so die beste Implementierung zum Ausblenden Diese Elemente.

Fazit

Während CSS einen Mechanismus zum Adressieren von Druckeinstellungen bietet, variieren die Browserunterstützung und das Verhalten. Chrome zeigt das wünschenswerteste Verhalten beim Ausblenden von Kopf- und Fußzeilen. Wenn jedoch die Konsistenz über alle Browser hinweg von entscheidender Bedeutung ist, müssen möglicherweise alternative Lösungen in Betracht gezogen werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die Standarddruckeinstellungen des Browsers mithilfe von CSS und JavaScript überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!