网页打印身份证尺寸跨浏览器不一致问题求助

这个问题确实是不同浏览器对打印媒体查询和页面尺寸的解析差异导致的，我来分享几个经过验证的解决思路：

1. 明确指定打印页面的尺寸 #

很多浏览器默认的@page设置没有明确的页面大小，加上size属性可以让浏览器更精准地计算容器尺寸：

@media print {
  @page {
    size: 8.5in 11in; /* 标准Letter纸尺寸，用A4的话可以写21cm 29.7cm */
    margin: 0.5in;
  }
  .card__print { width: 3in; height: 2in; }
  .card__print img { max-width: 100%; }
}

2. 强制盒模型为border-box #

默认的content-box盒模型会让width/height不包含padding和border，可能导致实际尺寸超出预期，添加box-sizing确保容器尺寸严格符合设置：

@media print {
  @page { margin: 0.5in; }
  .card__print { 
    width: 3in; 
    height: 2in; 
    box-sizing: border-box; /* 关键：让width/height包含内边距和边框 */
    padding: 0; /* 清除默认内边距 */
    border: none; /* 避免边框占用尺寸 */
  }
  .card__print img { max-width: 100%; }
}

3. 约束图片的比例与尺寸 #

防止图片拉伸或撑大容器，给图片添加max-height和object-fit属性，确保图片在保持比例的同时适配容器：

@media print {
  @page { margin: 0.5in; }
  .card__print { width: 3in; height: 2in; box-sizing: border-box; }
  .card__print img { 
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain; /* 保持图片比例，避免拉伸 */
    display: block; /* 去掉图片默认的行内间隙 */
  }
}

4. 针对Safari的特殊适配 #

Safari的WebKit引擎对打印单位的解析有时会有偏差，可以尝试用厘米单位替代英寸（3in≈7.62cm，2in≈5.08cm），或者添加WebKit专属属性强制样式精度：

@media print {
  @page { margin: 0.5in; }
  .card__print { 
    width: 7.62cm; 
    height: 5.08cm; 
    box-sizing: border-box;
    -webkit-print-color-adjust: exact; /* 强制Safari精确应用样式 */
  }
  .card__print img { max-width: 100%; max-height: 100%; object-fit: contain; }
}

5. 检查浏览器打印设置 #

即使设置了100%缩放，有些浏览器的默认打印选项可能勾选了“缩小到适合”或“适应页面”，要确保在打印预览中选择**“实际尺寸”或“100%缩放”**，取消自动调整的选项。

为什么会出现这种差异？ #

不同浏览器的打印引擎（WebKit/Safari、Gecko/Firefox、Blink/Chrome）对CSS打印属性的实现细节存在差异：

• Safari对英寸单位的换算精度和容器尺寸的计算逻辑和其他浏览器不同，容易出现拉伸
• Chrome和Firefox的打印引擎会更严格地遵循页面边距，但有时会因为默认的页面缩放逻辑导致整体尺寸偏小

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