如何使用 CSS 控制瀏覽器列印設定（邊距、頁首、頁尾）？

更改瀏覽器列印設定（邊距、頁首、頁尾）

已經進行了許多嘗試來解決修改瀏覽器列印設定的主題，但最終的清晰度仍然難以捉摸。本文提供了基於最新 CSS 標準的全面解釋和程式碼範例。

使用 @page 指令進行自訂

CSS 提供了 @page 指令，允許修改列印的頁面特定格式媒體。透過使用此指令，開發人員可以指定印表機邊距、頁面方向和其他設定。

設定印表機邊距

要設定印表機邊距，請使用 @page 指令中的 margin 屬性。此屬性採用以毫米為單位的值，並影響印表機選項面板中的邊距設定。

注意： @page 屬性的瀏覽器行為可能會有所不同。例如，Safari 不支援邊距設置，而其他主流瀏覽器則支援。

要使用@page 刪除頁首和頁腳，請如下設定邊距：

@page {
    margin: 0mm;
}

此技術可能不支援如果您的列印內容跨越多個頁面，因為瀏覽器特定的邊距被停用，那麼它會很有效。

瀏覽器特定行為

不同的瀏覽器在處理 @page 指令時會表現出不同的行為。細分如下：

• Firefox 3.6 及更低版本： @頁邊距被忽略。
• IE 7 及更低版本： @頁邊距被忽略。
• Safari 5.1.7: 不支援@頁邊距。
• Chrome 4.1: @頁邊距被忽略。
• IE 8: @頁邊距受到尊重，但瀏覽器頁首和頁腳不受尊重隱藏。
• Opera 10： @頁邊距不受尊重，但如果背景不透明，瀏覽器頁眉和頁腳將被隱藏。
• Chrome 21以上： @頁邊距受到尊重，如果邊距與頁邊距重疊，則瀏覽器頁眉和頁腳將被隱藏

範例程式碼

以下HTML 和CSS 程式碼示範如何使用@page 指令自訂列印設定。

    <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>


  <div>Top line</div>
  <div>Line 2</div>

注意： 此程式碼在 Chrome 中隱藏瀏覽器頁眉和頁腳，但在其他瀏覽器中則不然瀏覽器。

限制與注意事項

所有瀏覽器可能無法一致支援動態變更瀏覽器列印設定。某些瀏覽器可能會覆蓋自訂設置，或者結果可能會有所不同，具體取決於所使用的特定印表機。

以上是如何使用 CSS 控制瀏覽器列印設定（邊距、頁首、頁尾）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！