在 Outlook 2007 和 2010 中损坏的 HTML 电子邮件表格答案

【问题标题】：HTML email tables broken in Outlook 2007 & 2010在 Outlook 2007 和 2010 中损坏的 HTML 电子邮件表格
【发布时间】：2012-03-07 11:25:00
【问题描述】：

我的电子邮件模板在大多数电子邮件客户端中都能正常工作（或至少可以接受），但在 Outlook 2007 和 Outlook 2010 中完全无法使用。

我知道这些版本的 Outlook 使用 Word 呈现引擎而不是 IE。

我听说过 Outlook 分页错误，但这似乎只影响垂直间距。我的问题是水平间距。

代码： http://jsbin.com/alagih/edit#html,liveb

所有主要电子邮件客户端的测试结果： http://artletic.createsend.com/screens/y/F2B9C33F1297A73F

Outlook 2007 屏幕截图：

【问题讨论】：

开始调试：删除所有 amazonaws 托管的图像。然后开始删除样式定义。最终你会发现那个让 Word 吐槽的人。
谢谢@marc-b。我尝试了许多变体，但希望避免测试 50 次不同的时间。我正在使用 CampaignMonitor 的测试（使用 Litmus）。每次测试 5 美元对少数人来说是不错的，但在调试时，加起来很快！
不应该是你不能用硬编码的原始 html 编写快速测试脚本并在不涉及第三方的情况下将其处理到你自己的邮箱的任何真正原因。如果你不能用那个单独的脚本复制它，那就开始对供应商大喊大叫。
@MarcB 如果我有一台装有 Outlook 的 PC，我可以。 :)

【解决方案1】：

您永远不会为包含您的正文消息的表格设置宽度。

设置为<table border="0" width="">

对于您的“franco.jpg”图像，看起来 Outlook 忽略了 img 标记上的内联边距。尝试为您的内容创建一个包含两列的表格，然后将图像包装在 div 中并给它一个右边距，或者将您的文本内容包装在一个 div 中并给它一个左边距。由于某种原因，Outlook 不喜欢填充。

此外，由于 Outlook 2007 和可能 2010 使用 Word 作为渲染引擎，它会忽略某些样式，例如 background-image（也是背景位置），但它会接受 `bgcolor' 和 'background-color' .

测试 Outlook 2007/2010 的最快方法是在 MS Word 中打开它。它的渲染应该接近那些 Outlook 版本中的显示。

不确定是什么导致了=E2=80=9D。

如果你真的必须使用背景图片，试试this hack。

【讨论】：

There's a new 'hack' for including background images 在您原来的“this hack”链接中引用的同一站点。

【解决方案2】：

我发现，特别是对于 Outlook 2007 中的 HTML 电子邮件，您应该在标签和内联 CSS 中设置宽度参数。

例如<td width="150px" style="width: 150px;">

【讨论】：

【解决方案3】：

尝试为任何包含图像的 td 添加宽度。

例子：

<td width="150">
    <img src="/img/image.jpg" width="150" height="150">
</td>

还要确保这些图像设置为display: block。

【讨论】：