Gmail安卓深色模式（Android11）下HTML邮件拼接图片1px间隙求助

你在制作HTML邮件简报时，将图片拆分为两部分以设置不同链接，但在Android 11的Gmail App深色模式下，两张图片之间出现了1px间隙。以下是针对性的解决方法：

方案1：给下方图片添加负margin #

利用负margin直接抵消间隙，Gmail客户端支持该属性，只需给下方图片的样式增加margin-top: -1px;：

<tr>
  <td align="center" style="padding-top: 20px; background-color: #f9f7f4;line-height: 0;padding-bottom: 0;margin: 0;">
    <a href="#" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;">
      <img align="center" src="upper.png" alt="Placeholder" width="507" height="189" style="display: block;border-collapse: collapse;margin: 0;padding: 0;" border="0">
    </a>
  </td>
</tr>
<tr>
  <td align="center" style="padding-bottom: 50px; background-color: #f9f7f4;line-height: 0;margin: 0;padding-top: 0;">
    <a href="#" target="_blank" style="text-decoration:none;margin: 0;line-height: 0;"> 
      <img align="center" src="lower.png" alt="Placeholder" width="507" height="93" style="display: block;border-collapse: collapse;margin: 0;padding: 0; margin-top: -1px;" border="0">
    </a>
  </td>
</tr>

方案2：将两张图片放在同一个的内 #

把两个带图片的<a>标签合并到同一个<td>中，通过display: inline-block; vertical-align: top;实现无缝对齐，同时给父级<td>设置font-size: 0;消除字符间隙：

<tr>
  <td align="center" style="padding-top: 20px; padding-bottom: 50px; background-color: #f9f7f4; line-height: 0; margin: 0; font-size: 0;">
    <a href="#" target="_blank" style="text-decoration:none; margin: 0; line-height: 0; display: inline-block; vertical-align: top;">
      <img align="center" src="upper.png" alt="Placeholder" width="507" height="189" style="display: block; border-collapse: collapse; margin: 0; padding: 0;" border="0">
    </a>
    <a href="#" target="_blank" style="text-decoration:none; margin: 0; line-height: 0; display: inline-block; vertical-align: top;"> 
      <img align="center" src="lower.png" alt="Placeholder" width="507" height="93" style="display: block; border-collapse: collapse; margin: 0; padding: 0;" border="0">
    </a>
  </td>
</tr>

方案3：用背景色覆盖间隙 #

间隙可能来自深色模式下的渲染差异，给两张图片添加和容器背景色一致的outline或box-shadow，视觉上覆盖间隙：

<!-- 给两张图片的style增加以下属性 -->
style="... outline: 1px solid #f9f7f4; box-shadow: 0 0 0 1px #f9f7f4;"

方案4：使用HTML图像地图（更优方案） #

无需拆分图片，直接用<map>标签给单张图片的不同区域设置链接，从根源避免间隙问题：

<tr>
  <td align="center" style="padding-top: 20px; padding-bottom: 50px; background-color: #f9f7f4; line-height: 0; margin: 0;">
    <img src="full-image.png" alt="Placeholder" width="507" height="282" usemap="#image-map" style="display: block; border: 0;" />
    <map name="image-map">
      <!-- 上方区域链接，coords需根据实际图片坐标调整 -->
      <area shape="rect" coords="0,0,507,189" href="#" target="_blank" alt="Upper section">
      <!-- 下方区域链接 -->
      <area shape="rect" coords="0,189,507,282" href="#" target="_blank" alt="Lower section">
    </map>
  </td>
</tr>

注：coords数值需匹配完整图片的区域位置，可通过在线工具生成坐标。

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