发送到 Outlook 2010 的 html 电子邮件中出现奇怪的间距和边框问题答案

【问题标题】：Weird spacing and border issue in html email sent to outlook 2010发送到 Outlook 2010 的 html 电子邮件中出现奇怪的间距和边框问题
【发布时间】：2012-05-15 02:18:48
【问题描述】：

我正在发送包含一个简单表格的简单 html 邮件。该邮件在所有 Web 浏览器中看起来都很好，但 Outlook 2010 似乎很奇怪。如何解决这个问题？我尝试了几种变体，但结果都是一样的。

在此处查看 Outlook 屏幕截图：

展望 2010：

火狐：

这是html源代码：

<table style="width:500px;font:9pt Arial;background-color:#f6f6f6;" cellspacing="12px">
        <tr>
          <td style="border-bottom:1px solid #e6e6e6;">
            <span style="font-size:18px;color:#0033cc;">
              <b>
                <a href="url" target="_blank" style="text-decoration:none">Birthday Invitation</a>
              </b>
            </span>
            <br />
            <div style="clear:both;color:#666;overflow:hidden;padding:5px 0 7px;">
              Note: Testing
            </div>
          </td>
        </tr>
        <tr>
          <td style="border-bottom:1px solid #e6e6e6;padding-bottom:13px;">
            <br />
            <br />
            <b>HOST</b>
            <br />
            <span style="color:red">Host</span>            
          </td>
        </tr>
</table>

【问题讨论】：

标签： outlook html-email outlook-2010

【解决方案1】：

在 Outlook 07 或 10 中不支持填充和边距。这是由于使用文字渲染引擎而不是浏览器渲染引擎的重大决定。

您需要使用间隔 gif 来获得所需的布局。

用合适大小的间隔图像替换有边距或内边距的地方。

【讨论】：

【解决方案2】：

聚会很晚，但您需要删除cellspacing="12px"，并将其仅用于归零。

表格标签应如下所示：<table width="500" border="0" cellpadding="0" cellspacing="0">

改为向<td> 添加填充。

您还应该在<td> 中声明您的字体，而不是使用简写。完全支持bgcolor="#f6f6f6"，而css版本不支持。

【讨论】：