@media print 失效主因是选择器权重被覆盖，需将其置于样式表末尾、用更具体选择器、避免滥用!important；表格跨页需显式设display和page-break；链接URL显示要a[href]::after；打印裁切需重置float/overflow并关背景图形。
为什么@media print写在CSS末尾反而失效
不是语法错，是选择器权重被前面的通用规则压垮了。比如你写了 .header { display: none; } 在 @media print 里，但框架 CSS 里有 header.navbar { display: block !important; }，那打印时 header 还是会出来。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把所有
@media print规则集中放在主样式表最底部，且确保它加载顺序晚于第三方 CSS（比如 Bootstrap） - 优先用更具体的选择器：不用
.nav，改用body .nav或header .nav - 避免泛用
!important，它在打印上下文中权重异常高，容易引发连锁覆盖 - 如果用
<link rel="stylesheet" media="print">，必须确认该文件在 DOM 中位于其他样式表之后，否则仍可能被覆盖
大规模打印时表格跨页断裂怎么稳住
浏览器打印引擎对 <table> 的分页控制极弱，尤其遇到长表、带 <code><thead> 或嵌套结构时，<code>page-break-inside: avoid 常常失灵——根本原因是默认 display 行为在打印通道里不一致。
- 给
<table> 加 <code>page-break-inside: avoid;，同时显式声明display: table;（别依赖继承） <thead> 必须加 <code>display: table-header-group;，否则跨页后表头消失；<tbody> 对应设为 <code>table-row-group- 禁用 flex/grid 包裹表格容器，一律改为
display: block; width: 100%;，再用table-layout: fixed;锁列宽 - 横向长表要加
@page { size: landscape; }，并确保外层容器max-width: none;，否则会被 A4 纵向宽度截断 - 必须写在
@media print内部：a[href]::after { content: " (" attr(href) ")"; }，不能只靠全局样式 - 确保没有其他规则用
content: ""或display: none干扰了伪元素 - 中文页面要注意：某些字体不支持括号字符，建议用全角括号或直接用英文括号 + 字体回退，例如
font-family: "Microsoft YaHei", sans-serif; - 在
@media print入口统一重置：*, *::before, *::after { float: none !important; overflow: visible !important; } -
@page只控制纸张边距，不控制内容边距；真正该调的是body或主容器的padding - 临时调试可用
* { outline: 1px solid red !important; }，红色边框包住谁，谁就在撑空白页或越界 - 务必关掉 Chrome 打印设置里的「背景图形」开关，否则你的
background-color和background-image全部失效
打印预览里链接没显示 URL？检查这三处
用户拿到纸面文档后没法点击，只看到“点击查看”，却不知道链接去哪——这不是功能缺失，是 a::after 规则没生效或被覆盖。
Chrome 打印预览里内容被裁切或留大片空白
这不是 margin 设置太小，而是 overflow、float 和 @page 三者没协同好。很多团队只调 @page { margin: 1cm; }，却忘了父容器还在 overflow-x: hidden 或 float: left。
立即学习“前端免费学习笔记（深入）”；
实际大规模打印时，最容易被忽略的是动态插入内容的样式覆盖——比如 toast 提示、modal 框、loading 遮罩，这些 class 名往往不在你初始写的 @media print 范围里，一并发到打印机上就成干扰项。得提前约定好白名单类名，或用 JS 注入时同步补上 print 样式。
