Chrome 117打印预览A4横向模式失效问题及解决方案求助

问题说明 #

更新至Chrome 117版本后，用于设置横向打印的CSS规则@page {size: A4 landscape;}失效，打印预览无法显示A4横向布局。该规则在Chrome 116、Edge 117环境下可正常生效。

复现代码 #

<html>
<head>
    <title>Print Test</title>
    <style>
        @page {
            size: A4 landscape;
        }
    </style>
</head>
<body>
    <h1>Print Test</h1>
    <p>Print Test</p>
</body>
</html>

版本测试结果 #

• Chrome 117：失效（NG）
• Chrome 116：正常（OK）
• Edge 117：正常（OK）

用户反馈情况 #

已有不少用户在技术社区反馈该问题，这属于Chrome 117版本引入的已知兼容性Bug。

可行解决/替代方案 #

方案1：调整@page规则写法 #

交换尺寸与方向的顺序，同时添加margin声明，部分用户测试后可恢复正常：

@page {
  size: landscape A4;
  margin: 0;
}

方案2：结合媒体查询强制页面尺寸 #

通过媒体查询给body设置固定尺寸，配合@page规则生效：

@media print {
  body {
    width: 297mm;
    height: 210mm;
    margin: 0;
  }
  @page {
    size: A4 landscape;
  }
}

方案3：临时回退版本 #

若上述方案无效，可暂时回退到Chrome 116版本使用，官方已在追踪该Bug，后续更新大概率会修复此问题。

内容的提问来源于stack exchange，提问作者kazuaki k