@media print在编辑器中没反应，是因为在线工具（如CodePen）将HTML渲染在iframe内，父页样式无法穿透；必须用<link media="print">或<style media="print">显式声明，且禁用@import、flex/grid，设置thead{display:table-header-group}并平级书写@page。
为什么直接写 @media print 在编辑器里没反应
因为在线 HTML 编辑器（如 CodePen、JSFiddle、甚至某些富文本编辑器的预览 iframe）默认把 HTML 渲染在子 iframe 里，而父页面写的 @media print 样式不会穿透到 iframe 内部。你看到的“预览区”根本不是打印媒体上下文，@media print 块压根没被解析。
常见错误现象：window.print() 调用后，预览窗口还是屏幕样式；或者改了 .sidebar { display: none; }，但打印出来导航栏还在。
- 别在主编辑区写
@media print就以为万事大吉——它对 iframe 里的运行结果无效 - CodePen 等平台即使支持
<link rel="stylesheet" media="print">，若 CSS 文件托管在外且未配 CORS，浏览器会静默丢弃规则 - 本地调试最稳：把完整 HTML +
@media print写进一个 .html 文件，用 Chrome 直接打开
怎么让打印样式真正生效：必须用 <link media="print"> 或内联 <style media="print">
@media print 不是 JS 控制的 class 切换逻辑，浏览器打印引擎只认这个媒体类型本身。任何用 document.body.classList.add("print-mode") 配合 .print-mode .nav { display: none; } 的做法，打印时都会失效。
正确加载路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 外链方式（推荐）：
<link rel="stylesheet" href="print.css" media="print">—— 注意media值必须小写、无空格，"PRINT"或" print"都无效 - 内联方式（适合快速验证）：
<style media="print">body { font-size: 12pt; } .no-print { display: none !important; }</style>—— 必须加media="print"属性，仅写<style>不行
别用 @import 引入打印样式：Safari 和旧 Edge 会跳过，导致整块规则丢失。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
打印预览里表格断开、表头消失？关键不是 page-break-inside
表格跨页断裂的根本原因，是浏览器没把 <thead> 当作可重复的页眉组处理，且默认 <tr> 的 display 值可能被重置（尤其用了 reset.css 或框架）。
只写 tr { page-break-inside: avoid; } 没用，必须配合显式 display 声明：
-
thead { display: table-header-group !important; }—— 这才是让表头在每页顶部自动重复的必要条件 tfoot { display: table-footer-group !important; }tr { display: table-row !important; page-break-inside: avoid !important; }- 禁用包裹表格的
display: flex或display: grid容器——打印引擎对它们基本不支持
另外，@page 规则必须和 @media print 平级，不能嵌套其中。写成这样是非法的：@media print { @page { size: A4; } }，整个 @page 块会被忽略。
调试时怎么实时看到效果？别只靠开发者工具模拟
Chrome / Edge / Safari 开发者工具的 Rendering 面板里勾选 Emulate CSS media type → print，能快速验证 display: none、字体颜色、字号是否生效，但它不触发分页逻辑、@page 尺寸或 thead 重复行为。
真实分页问题必须进打印预览确认：
- 按
Ctrl+P（Windows）或Cmd+P（macOS），看内容是否被裁切、第二页有没有表头、图片是否溢出 - Safari 对
@page支持弱，即使模拟 print 媒体，@page { size: A4; margin: 15mm; }也可能不生效 - 如果页面含
<iframe>，需单独为 iframe 内容写打印样式，父页的@media print不会穿透
最容易被忽略的一点：打印样式中必须显式重置 body 的 margin 和 padding，否则浏览器默认打印边距会干扰布局；同时禁用所有背景色和图片，用 background: transparent !important，否则深色背景可能导致文字反白或墨水浪费。
