若谷歌浏览器打印网页时排版错乱，应依次调整：一、优化@media print样式；二、关闭chrome自动缩放并设为100%；三、用@page声明纸张尺寸与方向；四、覆盖容器宽高及溢出属性；五、禁用硬件加速。
如果您在谷歌浏览器中打印网页时发现排版错乱，例如表格重叠、文字截断、边距异常或内容被裁剪，则可能是由于浏览器默认打印样式与网页实际布局不匹配所致。以下是针对性的调整方法：
本文运行环境：MacBook Air M2，macOS Sequoia。
一、启用并优化 @media print 样式表
网页开发者可通过 CSS 媒体查询为打印场景单独定义样式，避免屏幕渲染样式干扰 PDF 或物理打印输出。若您能编辑网页源码，应优先添加或修正打印专用样式规则。
1、在网页 HTML 的 style 标签内或外部 CSS 文件中插入 @media print 规则。
2、设置 body 宽度为 A4 纸宽（210mm），并禁用影响布局的属性：
body { width: 210mm; margin: 0 auto; font-size: 12pt; }
3、隐藏非必要元素：
.no-print, nav, header, footer, .ads { display: none; }
4、修复表格打印错位：
table { border-collapse: collapse; width: 100%; }
th, td { padding: 4px; border: 1px solid #000; }
二、禁用 Chrome 默认打印缩放与自动适配
Chrome 在打印时会自动缩放页面以“适应纸张”，该行为常导致字体压缩、图片变形和横向内容被强行折行。关闭自动缩放可保留原始布局比例。
1、按 Cmd + P（Mac）或 Ctrl + P（Windows/Linux） 打开打印设置界面。
2、在右侧设置面板中展开“更多设置”。
3、将“缩放”选项从“适应”改为“自定义”，并手动输入 100%。
4、取消勾选“背景图形”以外的干扰项，如“页眉和页脚”（除非必须保留）。
三、强制指定 @page 尺寸与方向
Chrome 使用 @page 规则控制物理纸张参数。若网页需横向打印或固定为 A4，仅靠界面设置可能失效，必须通过 CSS 显式声明。
1、在网页 CSS 中添加如下代码：
@media print { @page { size: A4 portrait; } }
2、如需横向打印，将上行改为：
@media print { @page { size: A4 landscape; } }
3、若需精确像素控制（如导出高保真 PDF），可写为：
@page { size: 794px 1123px; margin: 0.5cm; }
四、调整网页容器宽度与 overflow 属性
部分网页因设置了固定宽度（如 width: 100vw）、min-width 或 overflow-x: hidden，导致打印预览时内容被截断或产生空白页。需解除对打印容器的强制约束。
1、检查 body 或最外层 div 是否存在 width、min-width 或 overflow-x 属性。
2、在 @media print 中覆盖这些样式：
body, .container { width: auto !important; min-width: auto !important; overflow-x: visible !important; }
3、若使用了 Bootstrap 或 Element UI 等框架，需额外移除其打印干扰类，例如 .row、.col-* 类中的 flex 布局或 max-width。
五、禁用硬件加速与重置 GPU 渲染路径
Chrome 的 GPU 加速模块在处理复杂 CSS 变换或 SVG 渲染时，可能导致打印预览阶段样式计算错误，表现为字体错位、阴影丢失或浮动元素偏移。
1、在地址栏输入 chrome://settings/system 并回车。
2、关闭“使用硬件加速模式（如果可用）”开关。
3、点击右下角“重启”按钮使设置生效。
4、重启后再次打开打印预览，观察排版是否恢复一致。
