HTML 电子邮件 - Outlook 2013 中的图像之间的间隙答案

【问题标题】：HTML email - gaps between images in Outlook 2013HTML 电子邮件 - Outlook 2013 中的图像之间的间隙
【发布时间】：2013-11-20 11:53:03
【问题描述】：

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

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

我不知道我还能做些什么来消除这些差距 - 我已将 tds 和图像的 line-height 设置为零，我已将要显示的图像设置为：block，我已将表格的边框为 0，单元格填充和单元格间距为零，以及边框折叠：折叠。我还能做些什么来修复它？

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

【问题讨论】：

标签： html email outlook html-email outlook-2013

【解决方案1】：

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

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

【讨论】：

这是一个伟大的发现。以前没有遇到过这个修复。
John 是对的，以不同的方式对电子邮件布局进行编程绝对可以最大限度地减少这个问题。这是我一直使用的技术。不过，请避免使用 colspan。即使它们可以工作，为什么要把事情复杂化。这个答案是最快最有效的解决方案。
Eesh，我正要开始为这个扯头发。很好的修复。

【解决方案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>

【讨论】：

我以前使用 colspans，但在 Outlook 中遇到的问题（单元格宽度渲染不正确）比现在（单元格高度）更多。我同意将标题作为图像是不好的做法，但被要求保持这种方式，因为显然字体是品牌的关键部分——这是我能得到的最接近的部分：/我现在实际上已经解决了 Outlook 表高度问题 - 将 tds 上的 line-height 从 0 更改为行的高度似乎可以解决问题。谢谢！
@EmmaW 您可能会 find this useful 解决 Outlook 不尊重 colspan 宽度的问题。

【解决方案3】：

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

【讨论】：