chrome打印预览中@media print样式不生效主因是加载限制，非css错误；需避免@import后声明、确保style标签含media="print"、修复外部css路径及cors；devtools模拟不可信，须重启打印预览验证；table-layout需强制设auto；width: 100%参照@page内容区，须配box-sizing: border-box；grid/float被忽略，应退化为block布局。
Chrome打印预览中@media print样式不生效的典型原因
不是CSS写错了，而是Chrome对print媒体查询的加载和解析有硬性限制。常见失效场景包括：@import语句后声明@media print、<style></style>标签未加media="print"属性、外部print.css路径404或被CORS拦截。DevTools里用“Emulate CSS media type → print”模拟的结果不可信——它只改渲染视口，不触发真实分页引擎。每次修改后必须关闭当前打印预览窗口，再按Ctrl+P（Windows）或Cmd+P（macOS）重新唤起，才能验证真实效果。
Firefox与Chrome在table-layout: fixed上的行为差异
Element UI、Ant Design等组件库默认启用table-layout: fixed，但在打印时，Chrome会丢弃列宽计算逻辑，Firefox则可能保留部分行为，导致同一表格在两浏览器中列宽错乱程度不同。解决方案必须强制覆盖：@media print { table { table-layout: auto !important; width: 100% !important; } }。同时避免依赖<colgroup></colgroup>——它在所有主流浏览器打印引擎中基本被忽略；改用tbody tr:first-child td { min-width: 120px; }配合white-space: nowrap控制最小列宽。
width: 100%在打印上下文中的参照系变化
width: 100%在打印时不再相对于父容器，而是相对于@page的内容区宽度（即纸张宽 − 左右@page margin）。Chrome默认@page margin是0.39in（约1cm），A4宽21cm，内容区只剩约19cm。若元素未显式声明box-sizing: border-box，再叠加padding: 8px就会直接溢出。必须在@media print块内为关键容器（如div、main、.print-container）显式设置：box-sizing: border-box !important。全局* { box-sizing: border-box }在打印上下文中会被UA样式重置，无效。
grid和float在打印引擎中被完全忽略的现实
Chrome、Edge、Firefox的打印引擎根本不解析grid-template-areas，也不处理float的脱离文档流语义。所谓“错位”，其实是元素退化为无序块级排列的结果。不要试图微调，必须重写：@media print { .grid-container { display: block !important; } .sidebar, .ad-banner { float: none !important; clear: none !important; } }。如果原布局依赖多栏，优先改用display: flow-root包裹，并确保break-inside: avoid加在子项（如article或section）上，而非grid容器本身。
最易被忽略的是@page规则与body尺寸的配对关系：单独设@page { size: A4; margin: 0.4in; }没用，必须同步在@media print中写body { width: 100%; box-sizing: border-box; }，否则width: 100%仍会参照错误基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
