打印样式影响正常页面是因为未用@media print隔离，应将所有打印样式置于@media print块内，确保仅打印时生效，并正确设置link的media="print"属性。
打印样式影响正常页面，通常是因为打印相关的 CSS 规则没有被正确隔离，导致浏览器在屏幕渲染时也应用了本该只用于打印的样式。解决方法很简单：用 @media print 明确限定打印专用样式，确保它们不会干扰屏幕显示。
用 @media print 包裹所有打印样式
所有只为打印设计的 CSS 规则，必须写在 @media print { ... } 块内。这样浏览器只在调用打印预览或实际打印时才解析这些样式。
- 错误写法（会污染屏幕样式）：
.header { display: none; } - 正确写法（仅打印时生效）：
@media print { .header { display: none; } }
避免在打印样式中重置全局元素
有些开发者习惯在打印样式里写 body { font-size: 12pt; margin: 0; } 这类重置，但如果没包在 @media print 里，就会覆盖屏幕样式。即使写了 media，也要注意别意外影响响应式布局——比如不要在 print 块里改 display: flex 或 width: 100vw，这些值在打印上下文中可能无意义甚至引发错位。
检查是否误用了 link 标签的 media 属性
如果通过外部 CSS 文件引入打印样式，务必确认 <link> 标签的 media 属性设置正确：
立即学习“前端免费学习笔记（深入）”；
- 仅用于打印：
<link rel="stylesheet" href="print.css" media="print"> - 不要写成
media="all"或漏掉 media 属性，否则文件会在所有场景加载并执行。
调试技巧：快速验证打印样式是否隔离
在浏览器开发者工具中，勾选「Rendering」面板里的 “Emulate CSS media” → 选择 “print”，就能实时看到页面在打印模式下的渲染效果，同时确认屏幕视图完全不受影响。
不复杂但容易忽略。
