语法不会失效，但视觉上常“没反应”，主因是打印样式被高权重屏幕样式覆盖、未启用浏览器“背景图形”选项、或框架（如Bootstrap）的默认@media print重置清除了自定义规则。
直接用 <style media="print"></style> 会失效吗？
不会语法失效，但大概率视觉上“没反应”——因为浏览器只在触发打印时才解析它，且不自动覆盖已有高权重样式。你写了 <style media="print">body { color: red; }</style>，但如果主样式里有 body { color: blue !important; }，打印时还是蓝色。
关键不是标签对不对，而是规则是否真正生效：必须显式提高选择器权重、禁用冲突的 !important、并绕过框架默认重置（比如 Bootstrap 的 @media print 块会清掉你的字体设置）。
@media print 里必须写的几条硬性规则
别只写 .nav { display: none; } 就交差。以下规则在真实打印中高频出问题，漏一条就可能白忙：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
body { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }—— 否则 Chrome/Edge 默认跳过背景色和边框 -
a:link, a:visited { color: #000 !important; text-decoration: none; }+a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }—— 否则链接变灰块，URL 完全丢失 -
img { max-width: 100% !important; height: auto !important; }—— 高 DPI 图片不加限制会撑破 A4 宽度（210mm） -
* { margin: 0; padding: 0; box-sizing: border-box; }—— 框架或重置 CSS 留下的默认边距在打印时会被放大
为什么 Chrome 打印预览看着正常，实际 Ctrl+P 却没背景色？
因为「背景图形」开关被关了——这不是代码问题，是用户级设置。Chrome 和 Edge 默认关闭该选项，哪怕你写了 background: #fff 和 print-color-adjust: exact，也会被无视。
调试时别只信 DevTools 的 “Emulate CSS media → print”，它不模拟这个开关。必须手动点开打印对话框 → 「更多设置」→ 勾选 Background graphics。你无法用 JS 控制它，所以更稳妥的做法是：把所有关键信息从背景移到前景（比如用 border-left: 4px solid #007bff 替代浅蓝背景条）。
page-break-inside: avoid 在表格上不管用怎么办？
直接写在 <table> 上基本无效。旧版 Safari、部分 Electron 内核、甚至某些 Chrome 版本对表格分页支持极差。<p>有效做法是：</p>
<ul>
<li>给表格包一层 <code><div class="print-table"><table>...</table></div>，然后写 .print-table { break-inside: avoid; }
<thead> 加 <code>display: table-header-group; —— 这是唯一能让表头在每页重复的可靠方式width: 100% 和 max-width: 210mm，打印引擎计算宽度时容易溢出导致强制断页最易被忽略的一点：别只看打印预览，一定要导出为 PDF 实际翻页检查——预览器会“平滑”断裂效果，而真实打印机或 PDF 渲染器不会。
