Chrome/Edge打印绝对定位HTML页面预览正常实际输出异常

该问题由Chromium内核（Chrome/Edge）与Gecko内核（Firefox）的打印渲染逻辑差异导致：
现有代码给打印窗口的body设置了position: absolute和display: inline-block，但未给绝对定位元素的直接父容器#divAdvice设置非static的定位属性。
Chromium打印渲染规则中，绝对定位元素会向上查找最近的定位属性非static的祖先元素作为锚点，若找不到则相对于页面初始渲染块定位；打印分页阶段Chromium会重置未明确定位上下文的块级元素渲染流，最终导致所有绝对定位元素失去锚点，全部堆叠在页面左上角。
Firefox打印渲染时会自动为打印内容的直接父级补全定位上下文，因此不会出现布局错乱。

现有打印逻辑还存在两个易触发异常的问题：

• 先向打印窗口写入全页HTML内容，延迟1秒后再替换为目标打印内容，等待期间原页面的脚本、样式容易污染打印窗口渲染环境
• 未给打印容器设置固定宽高，Chromium打印时会根据纸张尺寸自动收缩容器宽度，导致绝对定位坐标偏移

做两处调整即可解决问题：

• 重构打印窗口的文档写入逻辑，直接构造独立的打印文档，避免原页面内容、样式污染
• 为打印容器.divAdvice明确设置相对定位作为内部绝对定位元素的锚点，同时设置匹配内部元素坐标范围的固定宽高，避免容器被自动缩放

打印功能JavaScript实现 #

function fnPrint() {
  const printElement = document.getElementById('divAdvice');
  const printWindow = window.open('', 'PRINT');
  // 直接构造独立打印文档，避免原页面内容污染
  const printDoc = `
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache,no-store">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      .divAdvice {
        /* 核心修复：设置相对定位，作为内部绝对定位元素的锚点 */
        position: relative;
        /* 匹配现有绝对定位元素的坐标范围设置固定宽高，避免自动收缩 */
        width: 700px;
        height: 450px;
        margin: 0 auto;
      }
      /* 强制Chromium打印时保留所有元素样式，不做默认优化过滤 */
      * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      @page {
        size: A4;
        margin: 10mm;
      }
    </style>
  </head>
  <body>
    ${printElement.outerHTML}
  </body>
  </html>
  `;
  printWindow.document.write(printDoc);
  printWindow.document.close();
  // 等待DOM和样式渲染完成后触发打印，无需固定1秒延迟
  printWindow.onload = () => {
    printWindow.focus();
    printWindow.print();
    printWindow.close();
  };
}

• 修复后Chrome/Edge的打印预览、实际出纸布局均会正常，不会出现内容堆叠问题
• 后续如果调整内部绝对定位元素的坐标，同步修改.divAdvice的宽高值，保证容器覆盖所有元素的坐标范围即可
• 所有打印专用样式仅写入独立打印窗口，不会影响原页面的正常显示

内容的提问来源于stack exchange，提问作者Agnishwar Mukherjee