Chrome/Edge v126打印布局异常：缩放调整后页面左移变形求助

针对Chrome和Edge v126版本中，调整打印对话框缩放设置导致页面布局变形、向左偏移的问题，结合你怀疑打印时body未被隐藏的猜测，以下是几个实测有效的解决方法：

• 强制在打印样式中隐藏body并指定打印容器
  用CSS媒体查询单独控制打印场景的样式，确保body被完全隐藏，同时将需要打印的元素设为独占页面的容器：

  @media print {
    body {
      display: none !important;
    }
    .print-container { /* 替换成你项目中实际的打印容器类名 */
      display: block !important;
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  

  这种方式能彻底避免body默认样式干扰打印布局，确保只有目标打印元素被渲染。

• 重置打印页面边距与缩放适配规则
  浏览器打印对话框的缩放逻辑可能和页面默认边距冲突，在打印样式中强制重置页面边距，并给打印元素设置精准的纸张宽度：

  @media print {
    @page {
      margin: 0; /* 清除页面默认边距，避免缩放时偏移 */
      size: A4; /* 指定目标纸张尺寸，可根据需求修改 */
    }
    .print-container {
      width: 210mm; /* A4纸标准宽度，用mm单位更贴合物理纸张 */
      margin: 0 auto; /* 强制居中布局 */
    }
  }
  

  同时在打印对话框中选择缩放比例时，建议勾选"适应纸张大小"选项，减少布局偏移概率。

• 重置打印元素的浮动/定位属性
  如果打印元素内部使用了浮动或相对定位，在Chrome/Edge v126的新打印引擎中可能出现偏移异常，可在打印样式中统一重置：

  @media print {
    .print-container * {
      float: none !important;
      position: static !important;
    }
  }
  

• 临时切换到旧版打印引擎（Edge专属）
  Edge提供了回退到旧版打印预览的选项，可临时规避新版本的bug：

  1. 在地址栏输入edge://flags/#enable-old-print-preview
  2. 将该选项设置为"Enabled"
  3. 重启浏览器后测试打印效果

内容的提问来源于stack exchange，提问作者moein bolidh