Chrome和Firefox打印预览使用不同CSS解析器，导致样式表现不一致；break-inside: avoid在flex/grid容器中支持差异大，需包裹flow-root；@media print规则易被选择性忽略，兼容性补丁须嵌套验证。
Chrome 和 Firefox 打印预览用的是两套 CSS 解析器
不是样式写错了，而是 Chrome 的 PDF backend（打印服务进程）和开发者工具里的「打印模拟」根本不是同一套引擎。前者不加载 @font-face、忽略除 color-adjust: exact 外的所有 color 控制、也不执行 @page 尺寸声明；后者只是个快照，骗不了真实输出。
break-inside: avoid 在 flex/grid 容器内支持节奏不一致
Chrome v80+ 完整支持 break-inside: avoid，Firefox 直到 v115 才在 flex/grid 容器内正确解析它；v102 等旧版会退回到已废弃的 page-break-inside 逻辑，而该逻辑对弹性布局基本无效。
-
div.gallery-item { break-inside: avoid; }在 Chrome 里图片不跨页，在 Firefox 预览中照样被截断 - 对
display: flex或display: grid的直接子项，break-inside: avoid很可能失效——必须在外层包裹一层display: flow-root元素，恢复文档流上下文 -
break-inside对display: block最可靠，对inline-block或弹性子项需额外提权
@media print 规则本身就被浏览器选择性忽略
Chrome、Firefox 的打印引擎对选择器权重极其较真：.header 和 body .header 在打印上下文里权重差一级，就直接失效。更隐蔽的是：浮动、grid-template-areas、fr 单位、justify-items 等声明会被静默忽略，不报错也不 fallback。
- 外部
<link>必须带media="print"，写成media="all"或漏掉等于白写 -
table-layout: fixed（常见于 Element UI/Ant Design）在打印中会导致列宽计算丢失，必须强制重写为table-layout: auto !important -
color-adjust: exact和-webkit-print-color-adjust: exact必须成对出现在@media print内部，且作用于具体着色元素（如.invoice-item），不能只写在body上
@supports 必须嵌套在 @media print 内部
直接写 @media print { .item { break-inside: avoid; } } 是危险的——旧版 Edge 或 IE 会把整条规则当语法错误，连带废掉后续同组声明。Safari 16.4+ 会忽略整个媒体查询，如果 @supports 放在 @media print 外面。
立即学习“前端免费学习笔记（深入）”；
- 正确结构是：
@media print { @supports (break-inside: avoid) { .item { break-inside: avoid; } } @supports not (break-inside: avoid) { .item { page-break-inside: avoid; } } } -
page-break-inside是 Level 2 规范，所有现代打印引擎都认，只是对 flex/grid 不生效，所以它作为 fallback 合理且必要 - 别指望
break-after: page在 Firefox 里稳定工作——它解析更保守，优先改用break-before: page或break-after: always
