设置A4横向尺寸的空body打印溢出至第二页的问题求助

我之前在旧版Windows浏览器里踩过一模一样的坑！这个问题主要是旧版浏览器打印引擎的尺寸计算bug导致的，尤其是你提到的Chrome 63、Firefox 52、Edge 41这类比较老的版本，具体原因和解决办法如下：

问题根源 #

虽然你正确设置了A4横向的尺寸（297mm宽 × 210mm高），但这些旧版浏览器在解析@page的size: A4 landscape属性时，经常会出现逻辑混淆：

• 浏览器可能仍在以纵向A4的尺寸（210mm宽 × 297mm高）为基准计算可打印区域
• 加上默认的盒模型（没有box-sizing: border-box）可能导致body的实际宽度超出了浏览器认定的打印宽度，直接触发分页

另外，部分旧版Edge/Chrome会忽略@page的完整尺寸声明，只识别landscape方向，导致尺寸匹配出错。

可行的解决办法 #

1. 强制定义盒模型与尺寸约束 #

给html和body加上box-sizing: border-box，防止隐性的padding/border增加元素尺寸，同时限制html的溢出：

@page { size: A4 landscape; margin: 0; }
html, body { 
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}
html { 
  background: cyan; 
  overflow: hidden; /* 避免html层溢出触发分页 */
}
body { 
  width: 297mm; 
  height: 210mm; 
  background: red; 
}

2. 针对旧版浏览器的打印媒体查询hack #

给打印媒体单独添加分页禁止声明，同时明确指定方向：

@media print {
  @page {
    size: landscape; /* 单独声明方向，兼容旧引擎 */
    margin: 0;
  }
  body {
    width: 297mm;
    height: 210mm;
    page-break-after: avoid; /* 强制禁止后续分页 */
  }
}

亲测这个办法在你提到的旧版浏览器里能解决溢出问题。

平台差异说明 #

这个问题主要集中在旧版Windows桌面浏览器，新版Chrome/Firefox已经修复了这个打印尺寸计算的bug；macOS上的浏览器（即使是旧版）对横向打印的尺寸解析更准确，很少出现这类溢出。另外，少数打印机驱动的默认设置也可能影响，但核心原因还是旧浏览器的渲染引擎缺陷。

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