@media print必须独立声明且位置正确，配合@page控制纸张尺寸与边距；常见失效因漏media属性、被覆盖或未真实触发打印预览。
直接用 @media print 写样式，但必须写对位置、加 !important、并配合 @page 控制纸张——否则打印出来还是错乱。
为什么 @media print 写了却没生效
常见错误是把它塞进内联 <style> 里但漏了 media="print" 属性，或者写在通用 CSS 文件中间被前面的规则覆盖。真实触发只发生在 window.print() 或 Ctrl+P 时，且依赖加载顺序。
- 必须写在外部 CSS 文件末尾，或用
<link rel="stylesheet" href="print.css" media="print">单独引入 - 不能写在
@media screen嵌套里，也不能放在@import后面没声明 media - 如果用了 CSS-in-JS（如 styled-components），确认它支持
media="print"，否则得手动注入 - DevTools 的“模拟打印”只是预览，不代表真实输出；Firefox 预览最准，Chrome 容易合并页边距
@page 和 @media print 到底谁管什么
@page 只管纸张本身：尺寸、方向、边距；它里面不能写选择器，写了也无效。而 @media print 才负责元素样式、隐藏/显示、字体、分页逻辑。
-
@page { size: A4; margin: 2cm; }—— 合法，控制物理纸张 -
@page { body { font-size: 12pt; } }—— 无效，@page不处理元素 -
@media print { @page { margin: 1cm; } }—— 无效，@page必须平级声明，不能嵌套 - 横向长表要加
@page { size: landscape; }，同时确保容器max-width: none;，否则仍按纵向截断
表格、标题、链接这些最容易出问题的怎么修
浏览器对打印中表格、分页、链接的默认行为和屏幕完全不同，靠继承或通用规则基本不管用。
立即学习“前端免费学习笔记（深入）”；
-
<thead>不会自动跨页重复：显式加thead { display: table-header-group; } -
page-break-inside: avoid对<tr>无效，要加在<table>上 - 标题和紧接段落被拆开：用
h2 + p { break-inside: avoid; }（注意父容器需是块级 BFC） - 链接地址不显示：加
a::after { content: " (" attr(href) ")"; }，别指望text-decoration自动带 URL - 图片溢出页面：必须设
max-width: 100%; height: auto;+color-adjust: exact;强制打印颜色
颜色、背景、边框为什么全没了
不是 bug，是浏览器省墨策略：默认屏蔽 background、border、部分 <img> 渲染。你不显式覆盖，它们就真不会出现。
- 文字必须强制
color: #000 !important，别信currentColor或继承值 - 背景一律
background: #fff !important，既清空图片又重置底色 - 边框要打印？写
border: 1px solid #000 !important，别指望从 screen 样式里继承 - 避免用
* { }这类宽泛选择器，容易破坏<table>的display行为
最常被忽略的是：打印样式不是“微调”，而是重写一套独立逻辑。你得把 @media print 当作另一个渲染通道，所有关键样式都得显式声明、加 !important、并验证 Firefox 预览结果。
