如何解决Chrome打印PDF时相邻元素间出现白边（Hairlines）的问题？

以下是无需调整元素布局的通用修复方案，可覆盖现有及未来页面：

• 强制精确渲染：保留-webkit-print-color-adjust: exact，同时补充标准属性print-color-adjust: exact，彻底禁止浏览器对颜色、边框的自动优化：

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  

• 禁用DPI与缩放调整：添加-webkit-print-dpi-adjust: none阻止打印时的DPI适配误差，配合@page规则强制页面尺寸与原始布局一致：

  @page {
    size: auto;
    margin: 0;
  }
  * {
    -webkit-print-dpi-adjust: none;
  }
  

• 统一边框渲染规则：针对打印场景重置所有元素的边框相关样式，避免浏览器自动添加的抗锯齿白边：

  @media print {
    * {
      border-collapse: collapse !important;
      border-color: inherit !important;
      outline: 0 !important;
      box-shadow: none !important;
    }
  }
  

• 视口Meta标签优化：添加以下meta标签，确保打印时页面缩放比例稳定，消除视口导致的布局偏差：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

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