6

我正在编写一个 HTML 电子邮件，它在除 Outlook 2013 之外的所有主要电子邮件客户端中看起来都很好，它在我的图像切片之间添加了垂直间隙。不幸的是，我的计算机上没有安装 Outlook 2013，因此很难测试，但我的客户的屏幕截图表明它看起来像这样 -违规差距的屏幕截图

我的代码在这里可用 - HTML 版本。

我不知道我还能做些什么来消除这些差距 - 我已将 tds 和图像的行高设置为零，我已将图像设置为显示：块，我已将表格设置为边框0，cellpadding和cellspacing为零，并且border-collapse：折叠。我还能做些什么来修复它？

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

4

3 回答 3

14

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

    <td width="150" style="line-height: 83px;">
       <img src="" height="83px">
    </td>
于 2013-11-08T14:36:12.823 回答
3

您遇到问题是因为您将整个布局弄错了。您不需要将手表图像分成多个部分，并且绝对不应该有一个图像包含中心标题中的字母“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>
于 2013-11-08T14:12:07.727 回答
0

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

于 2014-11-25T04:16:53.137 回答