<p>page-break- 属性在不同浏览器打印预览中表现不一致，根本原因是浏览器对 CSS 分页规范的支持路径和解析逻辑不同：Chrome 与 Firefox 打印引擎使用分离的样式树和分页计算流程，DevTools 预览不等于真实 PDF 输出；page-break- 已被弃用，应优先使用 break-inside: avoid 并配合 @supports 和 @media print 做兼容性控制。</p>
page-break-* 属性在不同浏览器打印预览中表现不一致，不是写法错误，而是浏览器对 CSS 分页规范的支持路径和解析逻辑根本不同。
Chrome 和 Firefox 的打印引擎用的是两套 CSS 解析器
Chrome 的 PDF backend（打印服务进程）和 DevTools 的「Print emulation」渲染结果常不一致：前者不加载 @font-face、忽略 color-adjust: exact 以外的颜色控制、也不执行 @page 尺寸声明；后者只是快照，无法反映真实输出。Firefox 同样存在类似分离——预览界面用的样式树和最终生成 PDF 的分页计算是两套流程。
这意味着：你在 DevTools 里看到的「分页生效」，很可能在 Ctrl+P 实际预览中完全消失。
break-inside: avoid 在 flex/grid 容器内行为分裂严重
Chrome v80+ 完整支持 break-inside: avoid，包括对 display: flex 或 display: grid 子项的处理；Firefox 直到 v115 才在弹性布局容器内正确解析它，v102 等旧版本会退回到已废弃的 page-break-inside 逻辑，而该逻辑对 flex/grid 基本无效。
立即学习“前端免费学习笔记（深入）”；
常见现象：.gallery-item { break-inside: avoid; } 在 Chrome 中图片不跨页，在 Firefox 预览中照样被截断。
- 必须用
@supports (break-inside: avoid)隔离，不能直接写在@media print下 -
@supports必须包裹在@media print内部，否则 Safari 16.4+ 会忽略整个媒体查询 - 对 flex/grid 子项，仅加
break-inside: avoid不够，需额外包裹一层display: flow-root恢复文档流上下文
position: absolute 元素上 page-break-* 完全静默失效
CSS Paged Media 规范明确禁止所有 page-break-before、page-break-after、page-break-inside 在 position: absolute 或 position: fixed 元素上生效——浏览器不会报错，也不会警告，只是直接忽略。
真正导致截断的不是分页失败，而是定位基准丢失：打印时 fixed 不再锚定视口，absolute 的包含块变成当前分页区域，top 值可能直接超出可渲染范围。
- 弹窗、tooltip 等临时 UI 应在
@media print中设display: none，或用 JS 在window.print()前移除 DOM - 页眉/页脚类元素应改用
@page :first { margin-top: 30mm; }+@page { @top-center { content: "标题"; } }（纯文本） - 需要保留位置的模块，应改
position: absolute为position: relative，再用margin-top拉出空间
PDF 导出工具（Puppeteer/wkhtmltopdf/jsPDF）基本不认 page-break
这些工具底层不实现 CSS2 的 page-break-* 系列，只响应 Paged Media Level 3 的 break-inside: avoid-page，且仅限块级容器如 table、tbody、div.report-section。
tr、td、figure 子元素上写 break-inside 大概率被跳过；div 加了 position: absolute 后，break-inside: avoid-page 也会被规范禁止。
- 表格导出 PDF 时行被劈开？别硬保
tr，改用拆分tbody为多个子块 +page-break-after: always（仅辅助调试） - jsPDF + html2canvas 场景下，CSS 分页规则在截图阶段已被丢弃，唯一可控的是提前按 A4 高度（约 27cm）用 JS 拆分内容
- 测试必须真机导出 PDF 文件，不能只看 Chrome 打印预览——两者渲染路径完全不同
最易被忽略的一点：同一份 HTML，在 Chrome 打印、Puppeteer、wkhtmltopdf、jsPDF 中的分页行为互不兼容，没有「一次写完全平台生效」的写法。得按目标导出工具单独适配，且必须用真实输出验证，而非依赖模拟预览。
