直接打印网页出问题是因为浏览器默认按屏幕渲染，未适配纸张尺寸、边距和分页逻辑；需用@media print清除浮动、禁用溢出、避免分页断裂、重置颜色背景、确保字号≥12px，并优先用padding而非@page控制边距。
为什么直接打印网页总是出问题
因为浏览器默认把网页当屏幕渲染，不是为纸张设计的。浮动元素堆叠错乱、宽表格撑出空白页、背景色全变黑、链接地址不显示——这些不是你 CSS 写错了，是打印上下文根本没被适配。
@media print 规则必须写对位置
它不能只靠 DevTools 里点“模拟打印”就生效，也不能塞进内联 style 属性里漏掉 media 声明。真实触发只发生在 Ctrl+P 或 window.print() 调用时，且依赖加载时机和优先级。
- 推荐写在主 CSS 文件末尾，或单独用
<link rel="stylesheet" href="print.css" media="print">引入 - 别用
<style></style>标签但忘了加media="print"属性，否则规则压根不进打印上下文 - 如果用了 CSS-in-JS（比如 styled-components），确认它支持
media="print"，否则得手动注入或改用insertionPoint
表格、标题、长段落最容易被截断
浏览器按纸张高度硬切内容，page-break-inside: avoid 不是对所有元素都有效——尤其对 <tr> 完全无效，对 <code><table> 才起作用。<ul><li>给整个 <code><table> 加 <code>page-break-inside: avoid !important，别加在 <tr> 上
<li>标题紧跟正文时，给 <code><h2></h2> 或 <section></section> 加 break-inside: avoid（现代写法）或 page-break-inside: avoid（兼容旧版）
break-inside: avoid + break-after: auto 组合，比单用 page-break-after: always 更少产生空白页颜色、图片、边框默认不打印
这不是 bug，是浏览器省墨策略：默认屏蔽 background、border 和部分 <img> 渲染。你不显式覆盖，它们就真不会出现。
- 文字必须强制设
color: #000 !important，别信currentColor或继承值 - 背景一律写
background: #fff !important，既清空图片又重置底色 - 关键图加
max-width: 100%; height: auto;防溢出，再补-webkit-print-color-adjust: exact; color-adjust: exact; - 边框要打印？写
border: 1px solid #000 !important，别指望它从 screen 样式里继承过来
最常被忽略的是 @page 和 @media print 的分工：前者只管纸张尺寸、方向、边距，后者才管元素样式；@page 里不能写选择器，写了也无效。调完样式后，务必用 Firefox 打印预览验证——它分页逻辑最接近真实打印机，Chrome 容易误合并页边距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
