A4比例HTML页面在Chrome/Firefox打印PDF为何跨页，Safari正常？

问题原因 #

Chrome和Firefox的PDF打印引擎在处理像素单位的页面元素时，存在屏幕像素与打印物理尺寸的换算误差，再加上浏览器自身的渲染精度限制，哪怕元素比例完全匹配A4，也可能因为极小的尺寸溢出触发分页：

• A4标准物理尺寸为210mm×297mm，按150DPI换算正好是你用的1240px×1753px，但浏览器打印时的缩放逻辑并非严格按固定DPI映射，会结合打印驱动做隐性调整，导致实际渲染的元素尺寸略大于打印区域。
• 即便设置了“无页边距”，Chrome/Firefox的打印引擎仍可能保留极细微的默认间距，或者渲染时的舍入计算让元素刚好超出一页边界。

解决方案 #

1. 用物理单位+打印媒体查询彻底规避换算误差 #

放弃像素单位，直接用mm等物理单位匹配A4尺寸，从根源消除换算问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Red Div</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        @media print {
            @page {
                size: A4;
                margin: 0;
            }
            .red-div {
                width: 210mm;
                height: 297mm;
                background-color: red;
                page-break-inside: avoid;
            }
        }
        /* 屏幕显示样式（可选） */
        .red-div {
            width: 1240px;
            height: 1753px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="red-div"></div>
</body>
</html>

2. 微调像素尺寸，预留极小余量 #

如果坚持使用像素单位，可将元素尺寸缩小1-2px，抵消浏览器的渲染误差：

.red-div {
    width: 1238px;
    height: 1751px;
    background-color: red;
}

3. 用CSS缩放强制适配打印区域 #

通过transform: scale()在打印时精准缩放，替代手动调整打印比例：

@media print {
    .red-div {
        transform: scale(0.96);
        transform-origin: top left;
    }
}

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