@media print 中 display: none 不生效的主因是渲染层裁剪异常，实操应优先用 visibility: hidden + position: absolute；表格需设 table-layout: fixed 才能使 display: none 隐藏列有效；打印背景需手动开启浏览器设置；字体宜用 pt/cm 单位；打印样式表须置于屏幕样式之后。
print 媒体查询里 display: none 不生效？
常见现象是写了 @media print { .header { display: none; } }，但打印预览里元素还在。根本原因是某些元素（比如 <dialog></dialog>、绝对定位重叠区域、或被 transform 影响的容器）在打印时渲染层未被正确裁剪，display: none 本身有效，但父级或兄弟元素的布局残留导致视觉“没藏住”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
visibility: hidden+position: absolute双保险，避免脱离文档流引发的重排干扰 - 对浮动、flex 子项或 grid 容器内的隐藏目标，额外加
width: 0; height: 0; overflow: hidden; - Chrome 打印预览有时缓存样式，改完后按
Ctrl+R（Windows）或Cmd+R（macOS）硬刷新预览窗口
如何让表格只打印可见列，不打空白列？
用户常把 display: none 加在 <th> 或 <code><td> 上，结果打印时列宽仍占位——因为表格自动重算 <code>table-layout: auto，隐藏单元格仍参与宽度计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给整张表设
table-layout: fixed，再配合display: none隐藏列，否则无效 - 更稳妥的方式：用
column-span: none不可行（CSS 不支持），改用visibility: collapse（仅对<tr> 和 <code><col>有效） - 针对列控制，推荐直接操作
<col>标签：@media print { col.hidden-print { display: none; } }，并在 HTML 中写<col class="hidden-print"> - 必须手动开启：Chrome 打印设置 → 勾选「背景图形」；Firefox →
about:config搜print.print_background设为true - 代码侧不能绕过该限制，但可降级处理：用
color+border模拟浅色背景，比如background: #eee改成color: #333; border-bottom: 1px solid #ddd; - 若依赖图片传达关键信息（如二维码），别放 background，改用
<img alt="HTML怎么设置元素打印隐藏_HTML print media query教程【输出】" >标签并确保其src是绝对路径或 base64 内联 - 一律改用绝对单位：
pt（1pt = 1/72 inch）或cm/mm，例如font-size: 10pt或font-size: 3.5mm - 避免用
rem或em，因根字体大小在打印上下文里可能未继承或重置 - 测试时别只看浏览器预览缩放比例，要导出为 PDF 实际查看——PDF 渲染更贴近真实打印机行为
打印时背景色和图片默认不显示，怎么强制输出？
这是浏览器安全策略，不是 bug。Chrome/Firefox 默认关闭 background-printing，即使写了 background-color: #fff 或 background-image，打印预览里也灰白一片。
实操建议：
立即学习“前端免费学习笔记（深入）”；
为什么 @media print 里的 font-size 改了，但打印出来还是小？
本质是单位陷阱。很多人写 font-size: 12px，但打印设备以物理尺寸（英寸/厘米）为基准，px 在打印媒体中被解释为 1/96 英寸，远小于屏幕像素，实际可能只有 0.26mm 高——肉眼几乎不可读。
实操建议：
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：打印样式表必须放在所有屏幕样式之后，否则会被覆盖；且不要用 !important 混用，它在 print 媒体中优先级逻辑和屏幕不同，容易翻车。
