浏览器打印PDF时@page规则下页边距盒的content属性不生效如何解决

是的，当前主流桌面浏览器的原生打印PDF功能确实不支持@page规则下的边距盒特性，你遇到的边距盒内容不显示问题是浏览器特性未适配导致的，和你使用的macOS Catalina系统版本无关。

特性支持说明 #

@page下的@top-left、@bottom-center这类边距盒规则属于CSS Paged Media Level 3规范的内容，目前Chrome、Firefox、Safari的内置打印引擎仅支持@page的size、margin等基础属性，所有边距盒的content配置都会被直接忽略。只有专门面向PDF生成的渲染引擎才完整支持该规范特性。

替代实现方案 #

• 如果你坚持使用浏览器打印生成PDF，可以放弃边距盒写法，改用固定定位元素模拟页眉页脚：给页眉、页脚元素设置position: fixed，分别固定在页面顶部、底部的对应位置，同时给@page设置足够的上下边距，预留出页眉页脚的显示空间，避免正文和页眉页脚重叠。如果需要动态页码，可通过JS计算分页位置手动插入，也可以直接开启浏览器打印设置中的默认页眉页脚选项（该选项自定义程度较低）。
• 如果你核心需求是生成规范的电子书PDF，更推荐使用专门支持CSS Paged Media规范的PDF生成工具，不需要兼容浏览器打印限制，可完全还原你写的@page边距盒配置。

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