如何使用 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中文网其他相关文章！