HTML 电子邮件深色模式 iOS 和 Gmail

Question

绞尽脑汁思考 html 深色模式下电子邮件中的漏洞。特别是当三张图片在 table.

中并排放置时

<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="230" align="right"><a href="#"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_02?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;"  width="230" height="355" border="0" /></a></td>
      <td width="189"><a href="#"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_03?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;"  width="189" height="355" border="0" /></a></td>
      <td width="231" align="left"><a href="#"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_04?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;"  width="231" height="355" border="0" /></a></td>
    </tr>
  </tbody>
</table>

在右侧栏中呈现空白

当您强制缩小到 640 像素时，按比例缩放所有图像，它会消除间隙。知道为什么会这样吗？

<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr style="background-color:#FFFFFF">
      <td width="226" align="right" bgcolor="#FFFFFF"><a href="#" style="display:block"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_02?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="226" height="355" border="0" /></a></td>
      <td width="186" bgcolor="#FFFFFF" ><a href="#" style="display:block"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_03?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="186" height="355" border="0" /></a></td>
      <td width="228" align="left" bgcolor="#FFFFFF" ><a href="#" style="display:block"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_04?scl=1" alt="Overland"style="display: block !important; padding: 0 !important; margin: 0 !important;" width="228" height="355" border="0" /></a></td>
    </tr>
  </tbody>
</table>

Answer 1

这与深色模式无关，但它是 WebKit（Safari 的渲染引擎在整个 iOS 中使用）和 Blink（Chrome 的渲染引擎也在 Android 中使用）。您应该能够通过在 Chrome 或 Safari 中放大或缩小您的电子邮件在桌面上重现此内容。深色模式使这一点更加明显，因为您得到的是一条深色线而不是白色线。

至于为什么您的 table 在 650px 而不是 640px 会发生这种情况，让我们做一些数学计算。根据您的屏幕截图，您的屏幕尺寸为 1080 像素宽。减去电子邮件客户端在每一侧强加的 48px 间距，这将为您的电子邮件创建一个 984px 的视口。在 640px，您的电子邮件只需要放大 1.5375 倍。在 650px，您的电子邮件需要放大 1.513846153846154… 倍，这不是一个循环计数，并且不可避免地会产生白线。

不过，解决方法不是更改电子邮件的宽度，因为在其他屏幕尺寸下这个问题不可避免地会出现。我的建议是确保使用相对单位（如 %），并对布局进行编码，使所有列的宽度相同。（因此对于三列布局，每个“单元格”将为 33.333333%）。

HTML 电子邮件深色模式 iOS 和 Gmail

HTML email Dark Mode iOS and Gmail

html

html-email