Wie kann ich die Browser-Druckeinstellungen (Ränder, Kopf- und Fußzeilen) mithilfe von CSS steuern?-CSS-Tutorial-php.cn

Wie kann ich die Browser-Druckeinstellungen (Ränder, Kopf- und Fußzeilen) mithilfe von CSS steuern?

Linda Hamilton

Freigeben： 2024-12-30 06:21:10

Original

328 Leute haben es durchsucht

How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?

Ä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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!