根本原因是浏览器默认按屏幕渲染，未适配纸张尺寸、边距和分页逻辑；需用@media print清除浮动、禁用溢出、避免分页断裂、重置颜色背景、确保字号≥12px，并优先用padding而非@page控制边距。
打印时页面内容被截断或空白页太多
根本原因是浏览器默认把网页当屏幕显示渲染，而打印机需要考虑纸张尺寸、边距、分页逻辑。不干预的话，float、position: fixed、横向滚动容器这些在屏幕上正常的东西，在打印里会直接“消失”或强行撑出空白页。
实操建议：
- 用
@media print把所有非核心内容设为display: none，比如导航栏、广告位、侧边栏——只留main或.print-content区域 - 强制清除浮动：
float: none !important，否则浮动元素可能堆叠错乱或被切掉 - 禁用横向溢出：
overflow-x: hidden !important，防止宽表格/代码块拉出不可见区域，导致后面内容全被挤到下一页 - 给长列表或文章段落加
break-inside: avoid，避免标题和正文被硬生生拆到两页
字体、颜色和图片在打印后看不清或浪费墨水
屏幕用的亮色背景、细字体、透明度、阴影，在黑白激光打印机上基本等于“放弃治疗”。用户不是想打印一张海报，是想留下可读、省墨、存档的内容。
实操建议：
- 统一重置文本颜色：
color: #000 !important，别信currentColor或继承色，打印引擎解析不稳定 - 禁用背景图和背景色：
background: transparent !important，否则可能整页灰黑（尤其深色模式页面） - 图片按需保留：重要图表加
max-width: 100%; height: auto;，装饰性图片直接display: none - 字号别太小：正文字体至少
12px，小于10px在A4纸上几乎无法阅读
打印样式表没生效，或者只在开发者工具里预览正常、实际 Ctrl+P 就失效
常见于样式加载时机、优先级或媒体查询写法错误。打印样式不是“额外功能”，是 CSS 的一部分，但它有自己的一套触发逻辑。
实操建议：
- 确保
@media print规则写在主样式表里（或通过单独引入），别只靠 DevTools 里的 “print preview” 强制模拟 - 避免用
!important过度覆盖——它在打印上下文里权重更高，容易反向干扰；优先用更具体的选择器，比如body.print-ready h1而不是泛泛的h1 - 检查是否被 CSS-in-JS 或框架（如 React 的
styled-components）动态注入覆盖：有些库默认不支持print媒体类型，得显式配置或改用insertionPoint - Chrome 打印预览里点右上角「更多设置」→ 关闭「背景图形」选项，这个开关会直接无视你的
background设置
需要适配不同纸张尺寸（A4 / Letter）或自定义边距
CSS 的 @page 规则能控制纸张本身，但兼容性差、行为不一致——尤其是 margin 和 size 在 Firefox 和 Chrome 表现差异明显，Safari 基本不认 @page :first。
实操建议：
- 只对必须控制的场景用
@page：@page { size: A4; margin: 1cm; }，不要设margin-top: 0这类极端值，打印机驱动通常会强制加最小边距 - 避免依赖
@page :first或:left/:right—— 它们在大多数现代浏览器中仅对 PDF 导出有效，Ctrl+P 直接打印时大概率被忽略 - 真正可靠的边距控制，是用普通 CSS 给
body或容器加padding，再配合box-sizing: border-box，比赌@page稳定得多 - 如果业务强依赖 Letter 尺寸（比如美国客户），在
@media print里用@page { size: letter; }，但务必在真实打印机上验证，别只信预览
打印样式最麻烦的从来不是写多少规则，而是**每台打印机、每个驱动、每个浏览器版本对同一段 CSS 的解释都可能不同**。与其堆砌兼容写法，不如聚焦三个锚点：删掉一切非必要内容、强制重置颜色与布局、用 padding 代替 @page 控制边距。剩下那些“看起来不太一样”的地方，用户真正在意的往往只是“字能不能看清”“有没有漏页”“要不要多花一张纸”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
