Question

我正在构建一组电子邮件明信片，并且在某些版本的Outlook和Gmail中遇到问题，在某些（但不是全部）表格行之间创建了不需要的空格。

我对编写HTML电子邮件非常陌生，需要帮助排除故障 - 有人能告诉我在我的代码中需要更改哪些内容才能解决此问题吗？

以下是我的测试页：http://www.kristi.net/holidaycards/card_test.html

以下是显示Outlook中问题的屏幕截图：http://i43.tinypic.com/34ezrc3.gif

这些客户受到影响：

Outlook 2007
展望2010年展望2013年 Gmail（Android）
Gmail（资源管理器）
Gmail（Chrome）

另外，为了让您知道，用户将在其浏览器中打开HTML，然后将内容复制粘贴到其电子邮件客户端（Outlook）中，然后再自定义文本并发送消息。

Answer 1

您的图片需要style="display:block;"。尝试这样的事情：

<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">

您应该注意，如果有人将您的电子邮件转发出Outlook，则这些差距是不可避免的。因此，垂直分割图像总是更好。

这应该让你开始：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="500" valign="top">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
        <tr>
          <td height="200" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
            Content here...
          </td>
        </tr>
        <tr>
          <td>
            <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
    <td width="50">
      <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

Answer 2

尝试为您的图片添加vertical-align: middle;样式，例如：

<img alt="" src="" width="500" height="50" style="verticla-align: middle;">

对我来说，只能添加这种风格。

HTML电子邮件 - 表行之间的空白区域

2 个答案: