根本原因是浏览器打印引擎对css paged media规范实现路径不同：chrome pdf backend与devtools预览用两套样式树，firefox分页计算与渲染分离，safari要求元素必须在标准文档流且父容器不能是flex/grid。
为什么 page-break-* 在 Chrome/Firefox/Safari 里表现不一致
根本不是写法错误，而是浏览器打印引擎对 CSS Paged Media 规范的实现路径完全不同：Chrome 的 PDF backend 和 DevTools 预览用两套样式树；Firefox 的分页计算与预览渲染分离；Safari 则对 break-before 等规则触发条件更严格——比如要求目标元素必须在标准文档流中，且父容器不能是 display: flex 或 display: grid。你在 DevTools 里看到的「分页成功」，很可能 Ctrl+P 时就失效了。
table 内部加 page-break-before/after 为什么总被忽略
规范明确限制：page-break-before、page-break-after、page-break-inside 对 <tr>、<code><td>、<code><th> 这类表格内部元素基本无效。浏览器把整个 <code><table> 当作一个不可分割的块级上下文，强行往行或单元格上加断页指令，等于在胶水未干时撕画布。<ul><li>正确做法：把数据按页拆成多个独立 <code><table>，每个包在 <code><div class="print-page"> 里<li>在 <code><div class="print-page"> 上设 <code>page-break-after: always
<table> 必须显式包含 <code><thead>，并加 <code>thead { display: table-header-group; }table { page-break-inside: avoid !important; }，别用 break-inside
flex/grid 容器里 break-inside: avoid 失效怎么办
问题不在子元素，而在父容器让子项脱离了文档流。Chrome v80+ 支持它在 flex/grid 内生效，但 Firefox 直到 v115 才完全支持，Safari 更早版本则直接退回到已废弃的 page-break-inside 逻辑，而后者对弹性布局基本无效。
- 不要给
.gallery-item（flex 子项）直接加break-inside: avoid - 改用包裹层：
<div class="print-block"><div class="gallery-item">...</div></div> .print-block { display: flow-root; break-inside: avoid; }- 必须用
@supports (break-inside: avoid)包裹，且放在@media print内部，否则 Safari 16.4+ 会忽略整个媒体查询 - 兜底写法：
@supports not (break-inside: avoid) { .print-block { page-break-inside: avoid; } }
position: absolute 元素上加 page-break-* 为什么没反应
CSS Paged Media 规范明确禁止所有 page-break-* 在 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: "..."; } } - 避免用
float布局做打印结构，改用display: flow-root或display: block
实际落地时最容易被忽略的，是「@supports 必须嵌在 @media print 里面」和「position: absolute 元素上的断页指令永远不生效」这两点。前者导致 Safari 直接跳过整段规则，后者让调试者反复检查语法却找不到原因。
