@media print规则失效最常见的原因是位置错误或被高优先级样式覆盖，如置于@import之后、被!important覆盖，或路径错误、cors拦截；调试需用开发者工具检查styles面板，并优先使用link[media="print"]而非内联@media。
为什么@media print规则没生效
最常见的原因是它被写在了错误的位置或被更高优先级的样式覆盖。比如把@media print放在多个外部CSS文件的末尾，而前面某个通用样式表里用了!important；或者写在@import语句之后——CSS规范明确要求@import必须在所有其他规则之前，否则整个@media块会被浏览器忽略。
检查方法很简单：打开开发者工具的「Elements」面板，选中任意元素，看右侧「Styles」栏里是否出现@media print下的规则；如果没有，说明解析失败。常见诱因还有：print.css路径拼错、HTTP资源被CORS拦截（尤其在线工具如CodePen）、Safari下@page规则被静默丢弃。
- 确保所有打印样式都包裹在
@media print { }内，别用.no-print类手动切换 - 优先用
<link rel="stylesheet" media="print" href="print.css">，比内联@media print更稳定 - 避免在
@media print里写* { }这种全局重置，容易破坏<table>等原生display行为<h3>表格跨页断裂、表头消失怎么修</h3> <p>这不是bug，是浏览器打印引擎对<code><thead>和<code><tr>的display处理逻辑和屏幕渲染完全不同。你写的<code>display: table-header-group可能根本没起作用，因为父容器用了flex或grid，导致内部table结构被破坏。最稳妥的做法是放弃现代布局包裹表格，直接给
<table>加<code>display: block，再用width: 100%撑满；同时显式声明thead { display: table-header-group; }——注意不是display: table-row-group，后者不触发重复逻辑。<table>上加<code>page-break-inside: avoid，防止整表被拆开- 每行
<tr>加<code>display: table-row（旧版Chrome必需） - 横向长表加
@page { size: landscape; }，并确保容器max-width: none，否则A4纵向宽度会截断内容
字体、单位、链接URL在打印中为何总出错
用
px或rem定义字号，打印预览里尺寸就飘了；Web Font加载失败，中文变方块；默认链接只显示文本，URL丢失；背景色和图片压根不打出来——这些都不是样式写得不够细，而是没锚定物理维度。打印是物理输出通道，必须用
pt或mm单位。12pt ≈ 16px，但打印引擎认的是点制单位。同时启用print-color-adjust: exact强制渲染背景和颜色，再用a[href]::after补URL：code { font-family: "Courier New", monospace; } @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } a[href]::after { content: " (" attr(href) ")"; } }- 正文字体栈锁定系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif -
<pre class="brush:php;toolbar:false;"></pre>和<code>必须指定等宽字体，否则缩进全乱 - 禁用
text-shadow、box-shadow，它们在打印中不可见且浪费墨水
在线调试工具里@media print为啥不生效
CodePen、JSFiddle这类工具把你的代码放进iframe渲染，而父页面的
@media print不会穿透到iframe内部——你在编辑区写的规则，对实际运行结果完全无效。唯一可靠路径是本地HTML文件+浏览器打印预览。如果非要用在线工具，只有两个办法：一是把全部打印样式内联进iframe里的
<style></style>；二是用<link rel="stylesheet" media="print">引入外部CSS，并确保URL是HTTPS、可公开访问、无CORS限制。- CodePen开启Auto-updating Preview后，
@media print不会自动重载，需手动执行window.print()触发一次 - JSFiddle的External Resources添加
print.css时，HTTP或file://路径一律失败 - 嵌套
<iframe></iframe>的内容，其打印样式必须单独定义在iframe内部文档中，父页控制不了
真实打印预览里才能暴露分页、
@page、thead重复这些行为——模拟只是视觉快照，连page-break-after是否生效都看不出。别跳过这步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
