打印时 position: fixed 元素消失或错位，因 CSS Paged Media 规范要求 fixed 在分页中不保留视口锚定；应改用 @media print 覆盖为 static/relative 或 @page 伪类控制页眉页脚。
打印时 position: fixed 元素消失或错位
浏览器在打印模式下会忽略大部分 position: fixed 的布局行为——不是 bug，是规范要求。CSS Paged Media 模块明确指出：fixed 在分页上下文中不保留视口锚定语义，所以页眉、页脚、悬浮按钮这类元素常直接“不见”或挤到第一页顶部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@media print覆盖原样式，把关键fixed元素改为static或relative，再通过margin-top/padding-top模拟位置 - 对页眉/页脚，改用
@page的:first、:left、:right伪类 +margin配合content插入文本（仅支持纯文本和简单计数器） - 避免依赖
top/bottom值做定位，它们在打印中不可靠；优先用文档流内位置控制
Chrome/Firefox 打印分页断裂内容（如表格跨页、卡片被截断）
默认情况下，浏览器不会主动避免在不合适的位置分页，table、div.card 这类块级容器常被硬生生劈开。Firefox 对 break-inside: avoid 支持更稳，Chrome 从 v105+ 开始才较好支持 break-after: avoid-page 等新语法。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给可能跨页的容器加
break-inside: avoid（注意：父容器不能是flex或grid，否则失效） - 对表格行，给
tr加break-inside: avoid效果有限，更可靠的是给整个table加page-break-inside: avoid（旧语法，兼容性好） - 若内容过长必须分页，用
break-before: page强制另起一页，但需预判高度，否则易留大片空白
@media print 中字体、颜色、边框异常
很多浏览器（尤其是 Chrome）默认启用“节省墨水”模式：禁用背景色、图片、非黑文字色，并将字体重置为系统默认衬线体。你写的 color: #333 可能变成灰黑，background: #f8f9fa 直接清空，border: 1px solid #ddd 变成虚线甚至消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
color: #000 !important和background: #fff !important，并用-webkit-print-color-adjust: exact和print-color-adjust: exact强制输出背景 - 避免用
em或rem控制打印字体大小——不同设备渲染差异大，改用pt（如font-size: 12pt）更稳定 - 边框优先用
solid+ 黑色系，避免dashed、rgba()或半透明值，它们在多数打印机驱动里会被降级或丢弃
JavaScript 动态插入的打印内容不生效
调用 window.print() 时，浏览器会立即捕获当前 DOM 快照。如果页脚信息、时间戳、动态生成的二维码等是靠 JS 在 click 后异步插入的，很可能还没渲染完就触发了打印，导致空白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保所有打印所需 DOM 已同步就绪——把插入逻辑放在
print触发前，而非监听beforeprint（该事件已废弃，且不保证 DOM 更新完成） - 若必须异步（如请求后端生成 PDF 链接），用
setTimeout延迟window.print()，但别信“100ms 就够”，实测至少 300–500ms 更稳妥 - 不要依赖
matchMedia('print').matches判断是否进入打印模式——它只反映媒体查询状态，不表示打印流程已启动
打印样式最麻烦的从来不是写法，而是不同浏览器对同一段 CSS 的解释偏差，以及“看起来正常”和“真能印出来”之间的鸿沟。多用真实打印机或 PDF 导出反复验证，别只看浏览器打印预览窗格。
