Chrome中@page的margin at-rules失效？@top-center与@bottom-right不显示原因

问题 #

我编写了如下简单HTML代码，正在学习《使用CSS设计印刷样式》，但在Chrome浏览器的打印预览中，@top-center和@bottom-right的内容无法显示。

代码如下：

<html>
  <head>
    <style>
      @page {
        size: A4
      }

      @page {
        @top-center {
          margin: 10pt 0 30pt 0;
          border-top: .25pt solid #666;
          content: "My book";
          font-size: 9pt;
          color: #333;
        }
      }

      @page {
        @bottom-right {
          content: "Page "counter(page) " of "counter(pages);
        }
      }
    </style>
  </head>

  <body style="padding: 1.5cm">
    Hello world!
  </body>
</html>

打印预览截图：

解决方法 #

• 合并@page规则：Chrome对拆分的@page规则支持存在问题，将所有页面相关样式整合到同一个@page块内，避免规则被覆盖或忽略：

  @page {
    size: A4;
    @top-center {
      margin: 10pt 0 30pt 0;
      border-top: .25pt solid #666;
      content: "My book";
      font-size: 9pt;
      color: #333;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
    }
  }
  

• 预留足够边距：Chrome打印预览需要页面有足够边距来承载自定义页眉页脚，给@page添加边距设置，确保页眉页脚区域不被页面内容遮挡：

  @page {
    size: A4;
    margin: 2cm; /* 为页眉页脚留出空间 */
    @top-center {
      margin: 10pt 0 30pt 0;
      border-top: .25pt solid #666;
      content: "My book";
      font-size: 9pt;
      color: #333;
    }
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
    }
  }
  

• 关闭浏览器默认页眉页脚：在Chrome打印预览界面的设置中，取消勾选“页眉和页脚”选项——浏览器自带的页眉页脚会覆盖你用CSS定义的内容。

内容的提问来源于stack exchange，提问作者Fred Hors