使用CSS @page :first修改打印边距导致后续页面文字截断如何解决

这个现象根因为Blink内核浏览器（Chrome、Edge等）的打印布局存在已知bug：使用@page :first修改首页边距后，后续页面的内容绘制区域不会正确重置为默认边距对应的尺寸，导致内容被截断。

可行实现方案 #

方案1：使用命名@page规则（推荐，符合W3C标准） #

不使用:first伪类，给封面单独定义专属页面规则，边距切换逻辑清晰，不会污染后续页面的边距计算：

/* 所有非封面页面的默认边距配置 */
@page {
   margin: 2cm;
}
/* 封面专属页面规则 */
@page cover {
   margin: 0;
}
.cover {
   /* 指定封面使用cover页面规则 */
   page: cover;
   display: block;
   height: 100%;
   width: 100%;
   background-color: green;
   page-break-after: always;
}

HTML结构无需修改，和原有代码一致即可，现代主流浏览器均支持该语法。

方案2：兼容老旧浏览器的偏移补偿方案 #

如果需要兼容不支持命名page属性的旧版本浏览器，可以保留:first规则，同时给正文内容加外层容器手动模拟边距：

@page {
   margin: 2cm;
}
@page :first {
   margin: 0;
}
.cover {
   display: block;
   height: 100%;
   width: 100%;
   background-color: green;
   page-break-after: always;
}
/* 正文内容外层容器，手动补全边距 */
.content-wrapper {
  margin: 2cm;
}

HTML结构调整为：

<div class="cover"></div>
<div class="content-wrapper">
  <p>HUGE BLOCK OF BODY TEXT...</p>
  <!-- 所有正文内容均放入该容器 -->
</div>

注意事项 #

• 打印样式测试优先使用浏览器无痕窗口，避免扩展插件干扰打印布局计算
• 打印场景下使用cm、mm等物理单位，比px单位适配更稳定
• Safari浏览器对命名@page规则支持度较低，适配Safari优先使用方案2

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