根本原因不是语法错误，而是浏览器打印引擎不识别@media print规则——选择器权重不足、未隔离于独立块内、外部link未设media="print"，且float/grid等声明被静默忽略，必须用body .nav提权、重置布局并强制table-layout:auto。
为什么@media print写了却没效果
根本不是语法写错，而是浏览器根本不“认”你写的打印样式——@media print块外的任何规则，哪怕加了!important，在打印时都可能被屏幕样式覆盖。Chrome、Firefox 的打印引擎对选择器权重极其较真，.header和body .header在打印上下文里权重差一级，就直接失效。
必须做到三件事：
- 所有打印专用样式，只出现在一个
@media print { }块内，不混杂屏幕样式 - 隐藏导航、广告等元素时，别只写
.nav { display: none; }，而要写@media print { body .nav { display: none; } }，靠增加层级提权 - 外部引入时，
<link>标签必须带media="print"，写成media="all"或漏掉，等于白写
浮动和 Grid 在打印中为何全乱套
不是你的 CSS 写错了，是浏览器压根不解析float和grid-template-areas这类声明。打印引擎会静默忽略它们，然后把元素退化为无序块级排列——所以你看到的“错位”，其实是它强行回退后又没重置尺寸的结果。
正确做法是彻底放弃复用屏幕布局逻辑：
- 给所有可能浮动的容器（如
.sidebar、.ad-banner）加float: none !important - 删掉
grid-template-areas，改用显式行列定义：grid-template-columns: 1fr 2fr;，避免依赖命名区域 -
fr单位在打印中极不可靠，换成px或明确父容器高度下的% - 浮动父容器优先改为
display: flow-root，它既能包裹子项，又能让break-inside: avoid真正生效
表格打印右侧截断、列宽错乱怎么办
90% 出在table-layout: fixed——Element UI、Ant Design 等组件库默认启用它，靠width撑列，但打印时列宽计算完全丢失，内容全挤到左边或溢出纸张。
必须在@media print里强制重写：
table { table-layout: auto !important; width: 100% !important; }-
colgroup基本被忽略，改用tbody tr:first-child td { min-width: 120px; white-space: nowrap; } - 别单独给
th设width，打印中常失效；统一控制td的min-width - 如果表格嵌在浮动容器里，先清浮动父级，再调表格样式，顺序不能反
分页控制为什么加了还是被硬切
break-inside: avoid加在grid或flex容器上等于没加——打印分页机制只认每个子项是否允许被切断，对容器无感知。
真正起作用的位置和写法：
- 加在表格行（
tr）上无效，得加在tbody或整张table上 - 兼容旧环境必须双写：
page-break-inside: avoid;+break-inside: avoid; - 避免对
flex或grid容器设分页属性，应在外层包一层div再控制 -
overflow: hidden或transform会阻止分页生效，检查父级是否意外设置了这些
最耗时间的往往不是写样式，而是发现某个打印机驱动把page-break-before当空气，或者某台 A4 打印机悄悄缩放了 97%——真机打一次，比看十次预览都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
