html - AOL 在 HTML 电子邮件中的图像之间添加空格

Question

我为客户创建了一个带有表格的电子邮件，但是当我在 AOL 中测试它时，图像之间添加了额外的填充。看起来每个图像的右侧都添加了一个 3px 的空间...这是我的代码:

    <table border="0" cellspacing="0" cellpadding="0" align="center" width="700" valign="top">
    <tr>
        <td>
            <img src="images/nav-gaming.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-poker.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-restaurant.jpg" align="left" style="display:block; vertical-align:bottom" width="102" height="33" border="0" /> <img src="images/nav-tanzibar.jpg" align="left" style="display:block; vertical-align:bottom" width="92" height="33" border="0" /> <img src="images/nav-events.jpg" align="left" style="display:block; vertical-align:bottom" width="82" height="33" border="0" /> <img src="images/nav-packages.jpg" align="left" style="display:block; vertical-align:bottom" width="96" height="33" border="0" /> <img src="images/nav-rewards.jpg" align="left" style="display:block; vertical-align:bottom" width="120" height="33" border="0" />
        </td>
    </tr>
</table>

我是否遗漏了任何明显的东西？我已经测试过将每个图像添加到表中的新 td，但这会导致同样的问题。

Answer 1

将图像放入它们自己的表格单元格中总是更安全:

<table border="0" cellspacing="0" cellpadding="0" width="700">
  <tr>
    <td>
      <img src="images/nav-gaming.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" />
    </td>
    <td>
      <img src="images/nav-poker.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" />
    </td>
    <td>
      <img src="images/nav-restaurant.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="102" height="33" border="0" />
    </td>
    <td>
      <img src="images/nav-tanzibar.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="92" height="33" border="0" />
    </td>
    <td>
      <img src="images/nav-events.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="82" height="33" border="0" />
    </td>
    <td>
      <img src="images/nav-packages.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="96" height="33" border="0" />
    </td>
    <td>
      <img src="images/nav-rewards.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="120" height="33" border="0" />
    </td>
  </tr>
</table>

唯一的异常(exception)是如果您尝试 float 图像(要 float 您需要删除 display:block;)。 float 有时会出现问题，除非您的表格单元格中有足够的空闲空间。