Firefox 中 break-after: page 不生效是因规范实现差异，其解析更保守；应优先用 break-before: page 或 break-after: always，并避免直接作用于 table 等不可分单元。
Firefox 里 break-after: page 不生效，但 Chrome 可以
这不是 bug，是规范实现差异：Firefox 对 break-after 的解析更保守，尤其当元素高度接近页面剩余空间时，它可能忽略 avoid 类值（如 avoid-page），或对 page 值延迟触发。Chrome 则倾向提前分页，导致末页留白多。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
break-before: page替代break-after: page，尤其在章节标题、报告封面等「必须新开一页」的位置——Firefox 对break-before支持更稳定 - 若必须用
break-after，改用break-after: always（而非page），它在 Firefox 和 Safari 中兼容性更好 - 避免在
<div> 或 <code><section></section>上直接写break-after，先包裹一层语义化容器（如<article></article>），再通过类名控制，减少浏览器对匿名块的处理歧义给
<table> 加 <code>break-after: page没反应因为
<table> 本身不响应 <code>break-after—— 浏览器会把整张表当作一个不可拆分单元，但它的子项（<tr>）才是实际分页的锚点。直接作用于 <code><table> 的分页声明会被忽略。 <p>实操建议：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li>对每个 <code><tr> 同时设置 <code>break-inside: avoid和page-break-inside: avoid（后者兼容旧版 Chrome/Edge） - 如果想让整张表之后强制分页，把
break-after: always写在<table> 的父容器上，比如 <code><div class="print-section"> <li>不要给 <code><table> 设 <code>display: block后再加break-after，这会破坏表格语义和打印渲染逻辑break-after: avoid-page为什么还是被截断了avoid-page是软约束，不是强制禁止。当内容高度超过单页剩余空间，浏览器仍会截断——它只告诉浏览器「尽量别在这儿断」，而不是「绝对不能断」。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 搭配
break-inside: avoid使用，尤其作用于卡片、数据行这类小容器，能显著降低意外截断概率 - 检查父容器是否设置了
height或max-height，这些限制会干扰分页计算；打印样式中应避免固定高度 - 在
@media print中为关键容器设orphans: 3; widows: 3;，防止段落首尾行孤立在页边
Chrome 打印预览显示正常，但实际打印出来多一页
这是 Chrome 渲染引擎在「预估页面高度」时的误差：它按 CSS 盒模型计算，但实际打印机驱动会加入页边距、装订线等物理偏移，导致最后一块内容被挤到新页。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
@media print中显式重置@page尺寸：@page { margin: 0.5in; size: A4; }，避免依赖浏览器默认 - 对可能撑满页面的容器，预留 1–2 行缓冲空间，比如用
padding-bottom: 1.2em或空<div style="height: 1.2em;"> <li>调试时必须用真实打印机（或 PDF 打印机）导出验证，不能只信 Chrome 的「打印预览」界面</li> 实际生效的分页控制，往往取决于「谁在控制分页」和「谁在被分页」之间的层级关系。最容易被忽略的是：子元素的 <code>break-inside: avoid无法覆盖父容器的break-after强制行为，除非父容器也明确声明break-inside: avoid。
- 搭配
