CSS打印样式设置技巧

这篇文章深入解析了CSS打印样式的实战要点，强调必须使用@media print声明、避免交互伪类、禁用flex/grid布局等关键原则，并指出打印机默认禁用背景、强制灰度、分页逻辑特殊等与屏幕渲染的本质差异；同时揭示了动态JS样式易失效、@page规则不可替代、跨浏览器分页行为不一致等易被忽视的坑，辅以print.css分离、DevTools模拟打印、强制重排等实用调试技巧，为开发者提供了一套可靠、可落地的打印样式解决方案。

打印样式表必须用 @media print

浏览器只在触发打印（Ctrl+P 或 window.print()）时，才会启用 @media print 块里的规则。它和 @media screen 是完全隔离的——写在后者里的样式对打印无效，反之亦然。

常见错误是把打印样式直接塞进主 CSS 文件末尾，却不加 @media print 包裹，结果打印出来还是网页原样。

• 必须显式声明：@media print { ... }，不能只写 body { color: black; }
• 推荐单独建一个 print.css，用 引入，避免干扰屏幕渲染逻辑
• 调试时可在 DevTools 的 Rendering 面板中勾选 “Emulate CSS media” → “print”，实时预览效果

:not(:hover) 在打印时自动失效，别依赖交互伪类

打印是静态快照，没有鼠标悬停、焦点、点击这些状态。所有基于交互的伪类（:hover、:focus、:active、:visited）在 @media print 中一律被忽略——哪怕你写了 a:hover { color: red; }，打印时也完全不生效。

容易踩的坑是：为了隐藏某些元素，写成 .btn:not(:hover) { display: none; }，本意是“默认隐藏，悬停才显示”，但打印时因为 :hover 无效，:not(:hover) 反而恒为真，导致按钮彻底消失。

• 打印样式里禁止使用任何交互伪类，包括组合形式如 a:hover span
• 需要隐藏的元素，老老实实用 display: none 或 visibility: hidden 显式控制
• 想保留链接地址？用 @media print a::after { content: " (" attr(href) ")"; }，但注意 attr() 只读取 HTML 属性值，不支持 JS 动态设置的 href

字体、颜色、边距这些基础项，打印时表现和屏幕完全不同

打印机默认禁用背景色和背景图（Chrome/Firefox 都如此），color 也常被强制转成灰度，除非用户在打印设置里勾选“背景图形”。这意味着靠背景色区分状态的设计，在打印时大概率失效。

另一个典型问题是页边距：CSS 的 margin 对分页几乎无影响，真正起作用的是 @page 规则。

• 确保关键信息有足够对比度：用 color 而非 background-color 标识重点文字
• 替换图片为文字说明：@media print img { content: attr(alt); }（仅部分浏览器支持），更稳妥的是加 aria-label 并用 ::before 插入
• 控制分页用 @page { margin: 1cm; }，单个元素分页控制用 page-break-before: always 或 break-before: page（后者是新标准）
• 避免用 flex 或 grid 布局做打印结构——旧版打印引擎解析不稳定，优先用 block + float 或纯语义标签

JavaScript 注入的样式在打印时可能来不及生效

如果用 JS 动态插入