常见原因是未使用@media print媒体查询，框架可能清空打印样式，或误用visibility:hidden、动态加载CSS等；需在@media print中声明关键样式并避免JS依赖。
打印时 CSS 样式不生效，常见原因是什么
浏览器打印预览里样式“消失”或错乱，不是 CSS 写得不对，而是没进打印媒体查询的上下文。默认情况下，@media screen 规则对打印无效，而很多框架（比如 Bootstrap）或 UI 库会主动用 print 媒体查询清空部分样式，或者把 display: none 应用到非内容区域。
- 确保关键样式写在
@media print块内，或同时声明在@media screen, print中 - 检查是否误用了
visibility: hidden或opacity: 0—— 这些在打印中仍会占位甚至被输出 - 避免依赖 JavaScript 动态插入的样式表，打印触发时可能尚未加载完成
例如，想让页眉在打印时固定显示，不能只靠 position: fixed：它在多数浏览器打印中会被忽略。得改用 @page + running()（仅 Chromium 和 Safari 支持较好），或退而求其次，在 DOM 中显式复制页眉节点并设为 display: block。
如何让页面在打印时自动隐藏导航栏和侧边栏
这不是“删掉元素”，而是用媒体查询精准控制可见性。直接在全局样式中加一段即可，无需 JS 干预：
@media print {
header, nav, aside, .toolbar, .ad-banner {
display: none !important;
}
main, article {
margin: 0 !important;
width: 100% !important;
}
}-
!important是必要的，因为某些组件库的内联样式或高优先级类名（如ant-layout-sider）会覆盖普通规则 - 不要用
visibility: hidden替代display: none，前者仍会保留空白区域，影响分页 - 如果使用 Shadow DOM（如 Web Components），需在组件内部也定义
@media print，外部样式无法穿透
打印分页断裂、内容被截断怎么处理
浏览器按物理纸张尺寸切分内容时，不会智能判断语义边界，导致表格断在中间、标题孤悬在下一页顶部。核心是用 break-inside、break-before 和 break-after 主动干预：
立即学习“前端免费学习笔记（深入）”；
- 对表格行（
tr）设break-inside: avoid，但注意：它只对块级容器有效，所以更稳妥的是给整个table加break-inside: avoid - 对章节标题（如
h2）加break-after: avoid，防止标题单独留在一页末尾 - 避免在
flex或grid容器上设break-inside: avoid—— 兼容性差，Chrome 115+ 才稳定支持
另外，@page 可设置页边距：@page { margin: 1cm; }，但不能设置宽高；若需 A4 尺寸效果，得靠 @media print 中给 body 设 width: 210mm; margin: 0 auto; 模拟，再配合 size: A4（仅部分浏览器识别）。
前端调用 window.print() 后样式仍然错乱
window.print() 是同步触发，但样式计算和布局可能还没完成，尤其当页面含懒加载图片、动态渲染区块或 CSS-in-JS 注入时。这不是 bug，是执行时机问题。
- 在调用前强制触发重排：
document.body.offsetHeight;（读取 layout 属性可 flush 渲染队列） - 若用了 CSS Modules 或 emotion，确保打印样式也通过同一套机制注入，而不是只挂载了
screen版本 - 部分 UI 框架（如 Element Plus）提供
print-style插件或专用 class，优先查阅其文档而非手写 hack
最隐蔽的问题：Chrome 的“后台打印”模式（如从命令行启动或 CI 环境）完全不执行 JS，也不渲染伪元素（::before/::after），此时连 @media print 都可能被跳过。这种场景必须靠服务端生成 PDF，前端打印只是辅助方案。
