Question

我正在编写一个HTML电子邮件，除了Outlook 2013之外，每个主要的电子邮件客户端看起来都很好，这会在我的图像切片之间添加垂直间隙。遗憾的是，我的计算机上没有安装Outlook 2013，因此难以测试，但我的客户端的屏幕截图显示它看起来像这样 - screenshot of the offending gaps

我的代码可在此处找到 - HTML version。

我不知道我还能做些什么来消除间隙 - 我已经将tds和图像的行高设置为零，我已将图像设置为显示：块，我设置了table to border 0，cellpadding和cellspacing zero，以及border-collapse：collapse。我还能做些什么来解决它？

编辑添加 - 我实际上不确定图像或表格行之间是否存在间隙。从截图中看，它实际上看起来可能是表格行。

Answer 1

问题解决了 - 将包含图像的tds的行高更改为图像的高度而不是0，可以解决间隙，并且不会破坏其他客户端的布局。所以

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>

Answer 2

您遇到的问题是因为整个布局错误。您不应该将手表图像分成多个部分，并且绝对不应该在中心的标题中包含包含字母“DS”的图像。

因为你有一个复杂的布局，所以最好使用colspans和嵌套表 - 这比将图像切割成小块更简洁。水平切割的图像将始终导致问题 - 如果不是在初始发送中，Outlook将在那里强制转移，如果它仍然被转发。如果您必须剪切图像，请尝试垂直拍摄，因为它将在所有客户端保持完好无损。

在html中使用所有CTA（号召性用语）和重要的副本/文本也是一种好习惯，而不是图像，因为大多数客户端默认会阻止图像。如果电子邮件的图像与文本的比例不佳，也会被视为垃圾邮件。

尝试一下：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" width="450">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="top" width="400" style="padding:30px;">
           Fall in love with...
          </td>
          <td valign="top" width="50"> <!-- It is easier to split an image vertically -->
            <img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
            Luxury Watch Brands  <!-- Titles like this should always be in text not images -->
          </td>
        </tr>
        <tr>
          <td colspan="2" valign="top" width="450">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="150">
                  <img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
                <td width="150">
                  <img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
    <td valign="top" colspan="3" width="250">
      <table width="250" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            <img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td>
            Shop Luxury Watches >   <!-- Call to actions are better in text not images -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 3

电子邮件的最佳输出可以通过垂直切片（不是水平）来完成，并将其排列在多个嵌套的单行中。它将在所有客户中完美运作

HTML电子邮件 - Outlook 2013中图像之间的差距

3 个答案: