@media print下@page边距在Mac Safari和iPad不生效，该如何解决？

以下是几个可尝试的修复方案：

• 强制样式优先级
  Safari对@page样式的优先级处理可能存在差异，添加!important强制覆盖浏览器默认规则：

  @media print {
      @page {
          margin-top: 20% !important;
          margin-bottom: 10% !important;
          margin-left: 10% !important;
          margin-right: 5% !important;
      }
  }
  

• 用容器内边距替代@page
  如果@page规则不生效，直接给打印时的body或内容容器设置内边距，同时清除默认外边距：

  @media print {
      body {
          margin: 0;
          padding-top: 20%;
          padding-bottom: 10%;
          padding-left: 10%;
          padding-right: 5%;
          width: 100%;
          box-sizing: border-box;
      }
      /* 确保内容容器适配 */
      .print-container {
          width: 100%;
          box-sizing: border-box;
      }
  }
  

• 禁用自动缩放与强制精确渲染
  Safari可能自动缩放打印内容导致边距异常，添加CSS强制固定缩放并开启精确渲染：

  @media print {
      @page {
          size: auto;
          margin-top: 20%;
          margin-bottom: 10%;
          margin-left: 10%;
          margin-right: 5%;
      }
      body {
          zoom: 1 !important;
          -webkit-print-color-adjust: exact;
      }
  }
  

• 明确指定页面尺寸
  给@page添加size属性，避免Safari自动适配页面尺寸：

  @media print {
      @page {
          size: A4; /* 根据需求替换为letter、legal等 */
          margin-top: 20%;
          margin-bottom: 10%;
          margin-left: 10%;
          margin-right: 5%;
      }
  }
  

• 检查打印预览的浏览器设置
  Safari打印预览面板的默认边距设置可能覆盖CSS规则：进入打印预览后，点击「显示详细信息」，将边距选项改为「无」或「自定义」，确保浏览器不强制应用默认边距。

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