打印分页失效主因是break-before仅对块级盒生效且受父容器层叠上下文限制；表格忽略break-inside: avoid属规范行为；page-break-before与break-before应双写兼容；缩放会干扰分页计算，需禁用并固定单位。
打印时元素不换页，break-before: page 没反应
常见现象是加了 break-before: page 但打印预览里完全没效果。根本原因不是语法错，而是它只对「块级盒」生效，且父容器不能有 overflow: hidden 或 transform 等触发新层叠上下文的属性。另外，Chrome 和 Edge 对该属性支持较好，Firefox 则对 break-before 的处理更保守——有时得配合 break-after: page 才稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素是块级（如
div、section），避免用在span或inline元素上 - 检查祖先元素是否设置了
overflow: hidden、transform、filter，这些会截断分页上下文 - 在打印样式表中单独定义，避免被普通 CSS 覆盖：
@media print { .page-break { break-before: page; } } - 如果仍无效，试试
break-after: page放在前一个兄弟元素末尾，有时比break-before更可靠
break-inside: avoid 为什么对表格不起作用
表格（table）默认会忽略 break-inside: avoid，这是浏览器规范行为——表格行（tr）不允许跨页断裂，但整个表格可能被强行挤到下一页，造成大片空白。这不是 bug，是 CSS 分页逻辑对表格的特殊处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要给
table直接设break-inside: avoid，它无效 - 想让表格整体留在一页，可在外层包裹
div并设break-inside: avoid - 若表格太长必须分页，改用
display: block模拟表格布局，或拆成多个小表 +break-before: page - 注意 Safari 对
break-inside支持较弱，建议降级为手动插入分页符
打印样式里用 page-break-before 还是 break-before
page-break-before 是旧标准，已被 break-before 取代；但现实中两者共存，且行为不完全一致。关键差异在于：当元素本身不可分页（如图片、iframe），page-break-before 会强制推到下一页，而 break-before: page 可能被忽略——尤其在 Firefox 中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
break-before: page，但为兼容老版 Chrome 和 IE，可双写：.section { break-before: page; page-break-before: always; } -
page-break-before: always比page-break-before: left/right更可靠，后两者依赖文档方向且支持度差 - 避免混用
break-*和page-break-*在同一元素上，某些浏览器会按字典序覆盖，结果难预测
打印 PDF 时分页错乱，和页面缩放有关吗
有关，而且很关键。浏览器打印时默认启用「适应页面」缩放（即自动缩小内容以填满纸张），这会导致实际渲染尺寸变化，进而影响分页计算——明明预览里好好的，导出 PDF 就错位。这不是 CSS 写错了，是渲染流程被缩放干扰了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在打印样式中显式禁用缩放：
@media print { * { transform: none !important; } body { zoom: 1 !important; -moz-transform: scale(1) !important; } } - 设置固定字号和行高（避免相对单位放大后撑开），例如用
px或pt而非em - 导出 PDF 前，在打印对话框里关掉「适应页面」或「缩放到纸张大小」选项，选「无缩放」
- 复杂布局建议用
@page定义尺寸：@page { size: A4; margin: 1cm; }，否则浏览器可能按屏幕 DPI 推算，导致偏差
分页控制本质是渲染时的盒模型切分，不是样式开关。一旦涉及缩放、transform、flex 容器嵌套或表格，就容易脱节。最稳的方式永远是：结构可控 + 单位固定 + 预览时关缩放 + 导出前看真实 PDF。
