chrome打印预览错乱主因是浏览器打印服务进程的css解析器与开发者工具模拟不一致，@media print规则虽生效却受默认行为、安全策略及解析限制覆盖；需严格校验media值、禁用缓存、开启“背景图形”、重置table-layout与position，并为flex/grid提供table降级方案。
预览错乱不是样式没写，而是浏览器在打印上下文里根本没按你写的逻辑解析——@media print规则生效了，但被更高优先级的默认行为或隐藏限制覆盖了。
为什么Chrome打印预览里样式“看起来正常”，实际Ctrl+P就错乱
开发者工具的「打印模拟」只是视觉快照，不触发真实打印渲染流程。它不会加载print.css里的字体、不执行color-adjust: exact校验、也不尊重@page的尺寸声明。真正决定输出效果的是浏览器打印服务进程（如Chrome的PDF backend），它有自己的CSS解析器和安全策略。
- 检查
<link rel="stylesheet" href="print.css" media="print">是否拼错media值——必须是print，大小写敏感，不能是all, print或screen, print - 确认
print.css没有被HTTP缓存：在DevTools Network面板过滤print.css，看Status是否为200而非304；强制刷新时加?v=1参数 - Chrome打印预览右上角「更多设置」里，“背景图形”开关必须打开，否则
background和color再怎么写!important也无效
table-layout: fixed导致表格右侧被截断
这是Element UI、Ant Design等组件库的高频问题。el-table默认设table-layout: fixed，靠width属性撑开列宽，但打印时列宽计算丢失，内容全挤到左边，右边留白或溢出纸张。
- 在
@media print中强制重写：table { table-layout: auto !important; width: 100% !important; } - 如果表格有
colgroup，打印时会被忽略，改用tbody tr:first-child td配合min-width设定最小列宽 - 避免对
th单独设width，它在打印中常失效；统一用td的min-width+white-space: nowrap保列宽
position: fixed元素在打印中消失或堆叠到第一页顶部
CSS Paged Media规范明确要求position: fixed在分页上下文中不保留锚定位置。页眉、悬浮按钮、固定侧边栏都会被浏览器直接丢弃或重置为static。
- 不要试图用
transform: translateY()模拟固定定位——打印引擎不解析transform - 用
@media print覆盖：.header { position: static !important; margin-top: 0; }，再靠margin-top或padding-top手动预留空间 - 页脚信息必须提前写死在HTML里（如
<div class="print-footer">第<span>1</span>页</div>），JS动态插入的内容在window.print()快照中不可见
Flex/Grid布局在打印中塌陷或错行
Flex容器的flex-wrap、Grid的grid-template-columns在打印时兼容性极差。Chrome v105+才开始支持break-inside: avoid在Grid子项上生效，旧版本直接无视。
- 给Grid容器加
display: table作为降级方案：.grid-container { display: grid; } @media print { .grid-container { display: table; width: 100%; } } - Flex项目别用
flex: 1均分，改用width: 33.333%+box-sizing: border-box，避免打印引擎误算剩余空间 - 所有可能跨页的容器必须加
break-inside: avoid，但前提是父容器不能是display: flex或display: grid，否则该规则被忽略
最易被忽略的一点：打印样式不是“写完就生效”，它依赖浏览器服务进程的完整CSS解析链。哪怕一个color-adjust: exact漏写前缀，或@page规则放在<style></style>标签外，都可能导致整套规则被静默降级为浏览器默认打印样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
