Web-Frontend
CSS-Tutorial
Wie kann ich die Browser-Druckeinstellungen (Ränder, Kopf- und Fußzeilen) mithilfe von CSS steuern?
Wie kann ich die Browser-Druckeinstellungen (Ränder, Kopf- und Fußzeilen) mithilfe von CSS steuern?
Ändern der Browser-Druckeinstellungen (Ränder, Kopfzeilen, Fußzeilen)
Es wurden viele Versuche unternommen, das Thema der Änderung der Browser-Druckeinstellungen anzugehen, aber eine endgültige Klarheit ist noch nicht gegeben. Dieser Artikel bietet eine umfassende Erklärung und ein Codebeispiel basierend auf den neuesten CSS-Standards.
Anpassung mit der @page-Direktive
CSS bietet die @page-Direktive, die die Änderung der seitenspezifischen Formatierung für den Ausdruck ermöglicht Medien. Mithilfe dieser Direktive können Entwickler Druckerränder, Seitenausrichtung und andere Einstellungen festlegen.
Druckerränder festlegen
Um Druckerränder festzulegen, verwenden Sie die Eigenschaft „margin“ innerhalb der @page-Direktive. Diese Eigenschaft nimmt Werte in Millimetern an und wirkt sich auf die Randeinstellungen im Optionsfeld des Druckers aus.
Hinweis: Das Browserverhalten für @page-Eigenschaften kann variieren. Safari unterstützt beispielsweise keine Randeinstellung, während andere große Browser dies tun.
Um Kopf- und Fußzeilen mit @page zu entfernen, legen Sie die Ränder wie folgt fest:
@page {
margin: 0mm;
}Diese Technik ist möglicherweise nicht möglich effektiv sein, wenn sich Ihr gedruckter Inhalt über mehrere Seiten erstreckt, da die browserspezifischen Ränder deaktiviert sind.
Browserspezifisch Verhalten
Verschiedene Browser zeigen ein unterschiedliches Verhalten bei der Verarbeitung von @page-Anweisungen. Hier ist eine Aufschlüsselung:
- Firefox 3.6 und niedriger: @Seitenränder werden ignoriert.
- IE 7 und niedriger: @Seitenränder werden ignoriert.
- Safari 5.1.7: @Seitenränder werden nicht unterstützt.
- Chrome 4.1: @Seitenränder werden ignoriert.
- IE 8: @page-Ränder werden berücksichtigt, die Kopf- und Fußzeile des Browsers jedoch nicht ausgeblendet.
- Opera 10: @Seitenränder werden nicht berücksichtigt, aber die Kopf- und Fußzeile des Browsers werden ausgeblendet, wenn der Hintergrund nicht transparent ist.
- Chrome 21 und darüber: @page-Ränder werden beachtet und die Kopf- und Fußzeile des Browsers werden ausgeblendet, wenn die Ränder mit der überlappen Inhalt.
Beispielcode
Der folgende HTML- und CSS-Code zeigt, wie Druckeinstellungen mit der @page-Direktive angepasst werden.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto;
margin: 0mm;
}
html
{
background-color: #FFFFFF;
margin: 0px;
}
body
{
border: solid 1px blue ;
margin: 10mm 15mm 10mm 15mm;
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>Hinweis: Dieser Code verbirgt die Kopf- und Fußzeile des Browsers in Chrome, jedoch nicht in anderen Browsern.
Einschränkungen und Überlegungen
Das dynamische Ändern der Browser-Druckeinstellungen wird möglicherweise nicht in allen Browsern einheitlich unterstützt. Einige Browser überschreiben möglicherweise benutzerdefinierte Einstellungen oder die Ergebnisse können je nach verwendetem Drucker variieren.
Das obige ist der detaillierte Inhalt vonWie kann ich die Browser-Druckeinstellungen (Ränder, Kopf- und Fußzeilen) mithilfe von CSS steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Wie verwenden Sie CSS, um Texteffekte wie Textschatten und Gradienten zu erstellen?
Mar 14, 2025 am 11:10 AM
In dem Artikel werden CSS für Texteffekte wie Schatten und Gradienten verwendet, diese für die Leistung optimiert und die Benutzererfahrung verbessert. Es listet auch Ressourcen für Anfänger auf (159 Zeichen)
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
