Gmail App Dark（Android 11.0）上切片图像之间的 HTML 电子邮件水平线/间隙/边框

Question

我正在制作 HTML 电子邮件通讯。这张图片拼接成两部分，所以我可以在图片的两部分放置不同的链接。

问题是我在 Gmail App Dark（Android 11.0）上可见的图像之间有这个微小的 1px 间隙。这两个图像应该看起来像一个无缝图像，它们之间没有任何垂直间距。

HTML：

   <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;" border="0">
        </a>
      </td>
    </tr>

在浏览了几十个类似的问题并为此花费了几个小时之后，我仍然无法解决这个问题。 以下是我尝试过的一些事情：

- removing margins, paddings, linebreaks
- wrapping <a> tags with <p style="margin:0">
- replacing png with jpg images
- replacing images all together
- setting width="100%" and height="auto" while setting max-width and max-height in style
- removing <a> tags
- wrapping <a> tags in <div style="line-height: 0; font-size:0">
- etc...

请帮忙，我很绝望！

Answer 1

请尝试：

<a>

上的边框，即

<a style="...border:none;">

重置表格设置，即

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">

虽然您在图像上使用了

display:block

，但您可以改用

vertical-align:middle

（但它应该做同样的事情 - 即删除图像下方的空间）

此外，如果您还没有，请在测试时尝试使用实际有效的链接。有时当你有一个像“#”这样的无效链接时，事情会发生变化（但我只能想到 Outlook.com 会做一些有趣的事情）。