如何使用 CSS 控制浏览器打印设置（边距、页眉、页脚）？-css教程-PHP中文网

更改浏览器打印设置（边距、页眉、页脚）

使用 @page 指令进行自定义

设置打印机边距

浏览器特定行为

示例代码

限制和注意事项

首页

web前端

css教程

如何使用 CSS 控制浏览器打印设置（边距、页眉、页脚）？

Linda Hamilton

Dec 30, 2024 am 06:21 AM

How Can I Control Browser Print Settings (Margins, Headers, Footers) Using 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 指令自定义打印设置。

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

登录后复制

注意： 此代码在 Chrome 中隐藏浏览器页眉和页脚，但在其他浏览器中则不然浏览器。