（本文最初发表于2023年4月27日，更新于2024年8月5日）
由于可用的企业邮箱客户端如此之多，每个客户端都以不同的方式呈现企业邮箱，因此企业邮箱编码和设计已成为营销人员面临的挑战。
继 Gmail 和 Apple Mail 之后，Microsoft Outlook 成为电子消息领域的主要参与者。 Outlook 对 B2C 和 B2B 企业邮箱通信产生了巨大影响，从第一个免费企业邮箱服务发展到各种桌面企业邮箱应用程序。 它为桌面、网络邮件和移动设备提供不同版本，并作为“Windows Mail 10”包含在 Windows 10 中。
然而，将 Outlook 呈现为 HTML 是一个主要问题。 如果企业邮箱无法正确显示，可能会导致订阅者失望，并随着时间的推移损害您的品牌声誉。 因此，许多营销人员对于是否通过 Outlook 发送企业邮箱犹豫不决。
让我们探讨一些常见的 Outlook 企业邮箱呈现问题。
1. 不支持背景图片
2. GIF 动画不起作用
3.缺乏对持仓和浮动的支持
4.更改链接颜色
5.无边距显示
Outlook 特定的解决方法
1. 在图像下方添加额外的填充
2.使用VML代码解决DPI缩放
3.消除嵌套表以删除空格
4.使用XHTML进行CSS渲染
5. 设置渲染后备字体的条件
裹！
常见问题解答
1. 不支持背景图片
您可以为企业邮箱考虑多种类型的背景：
- 全身背景
- 背景图案
- 图形上下文
- 本节的背景
遗憾的是，Outlook 2007 至 2013 版本不支持任何这些背景类型。 要在 Outlook HTML 企业邮箱模板中有效呈现背景图像，建议的解决方案是使用矢量标记语言 (VML)。
您可以在标签中输入以下代码
的 Outlook HTML 模板，以确保背景图像覆盖整个企业邮箱窗口。<div style=”background-color:#000000;”>
<!–(if gte mso 9)>
<v:background xmlns:v=”urn:schemas-microsoft-com:vml” fill=”t”>
<v:fill type=”tile” src=”IMAGE.png” color=”#000000″/>
</v:background>
<!(endif)–>
<table height=”100%” width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td valign=”top” align=”left” background=”IMAGE.png”>此代码可以在 Outlook 2007、2010 和 2013 中有效显示背景图像，但在 Windows Mail 10 中不起作用。
为了解决这个问题，必须调整代码以将 v:image 包含在其源中，从而允许使用 v:rect 使背景图像出现在容器中。 此外，在 v:fill 中将不透明度设置为 0% 会使顶层透明，从而允许包含内容的新 div 可见。 使用内联块； position: v:rect 中的绝对位置，容器位置固定为背景。
<td valign=”top” height=”700″ background=”Image Live URL Here” bgcolor=”#f7901e” style=”height:700px; background-image:url(Image Live URL Here);background-color: #f7901e;”>
<!–(if gte mso 9)>
<v:image xmlns:v=”urn:schemas-microsoft-com:vml” fill=”true” stroke=”false” style=” border: 0;display: inline-block; width: 550px; height: 700px;” src=”Image Live URL Here” />
<v:rect xmlns:v=”urn:schemas-microsoft-com:vml” fill=”true” stroke=”false” style=” border: 0;display: inline-block;position: absolute; width: 550px; height: 700px;”>
<v:fill opacity=”0%” color=”#f7901e” />
<v:textbox inset=”0,0,0,0″>
<!(endif)–>
<div>
<!– HTML Content Here –>
</div>
<!–(if gte mso 9)>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<!(endif)–>
</td>要在 Outlook 企业邮箱模板中添加背景图案，请将图案上传到“www.backgrounds.com”以接收即用型 VML 代码。 有关如何在 Outlook HTML 企业邮箱模板中嵌入背景图像的更多详细信息，请参阅我们标题为“企业邮箱中的背景图像”的博客文章。
2. 动画 GIF 不起作用
Outlook 企业邮箱渲染的主要问题之一是较新的版本（2003 及更高版本）不支持动画 GIF； 他们只显示第一张图像。
这可能会对企业邮箱营销模式的有效性产生负面影响。 为了缓解这个问题，请设计 GIF，使第一帧有效地传达信息，最好只持续几毫秒。 您可以为其他企业邮箱客户端添加带有 GIF 图像的附加幻灯片。
下面的示例突出显示了 Outlook 和其他企业邮箱客户端之间的 GIF 显示差异。
其他企业邮箱客户端：
外表：
关于展望：
如果您需要在 Outlook HTML 企业邮箱模板中使用 GIF，最好包含传达相同消息的静态图像。 当企业邮箱在 Outlook 中使用 Outlook 条件编码打开时，此图像将替换 GIF。
最初，Windows Mail 10 仅显示动画 GIF 的第一帧，但此问题在后续更新中得到修复，现在支持 Outlook HTML 模板中的动画 GIF。
3. 缺乏对位置和浮动的支持
现代 Web 和企业邮箱开发允许您使用 div 等容器来组织内容，并使用位置和浮动等属性。 但是，Outlook 和 Windows 10 邮件不支持这些属性。
为了确保您的企业邮箱在所有主要客户端、浏览器和设备上正确显示，最好使用表格来组织您的企业邮箱。 使用表格将内容组织成行和列，并使用align=”left”属性来更好地对齐。
4. 链接颜色改变
当使用 Outlook 中的 HTML 模板发送企业邮箱时，无论原始文本的颜色如何，所有链接都会自动变为蓝色或紫色并带有下划线。 此蓝色或紫色下划线在不同的企业邮箱客户端中仍然可见。
要避免在 Outlook 企业邮箱模板中出现此问题，请使用标签 用标签包围文本 并应用样式属性。 这是您可以使用的代码。
<a style=”color:#E3A216; text-decoration:none;”>
<span style=”color:#E3A216;”>
<font color=”#E3A216″>
Click me
</font>
</span>
</a>5. 无边距显示
Outlook HTML 呈现的另一个问题是 Outlook 不支持边距，这可能会使您的内容看起来无结构且混乱。
为了解决这个问题，您可以使用垫片。 这些可定制的块可在各种工具中使用，可以根据需要添加。 请务必在发送之前测试您的企业邮箱，以确保一切看起来都很好。
其他企业邮箱客户端：
关于展望：
Outlook 特定的解决方法
在本节中，我们将了解如何修复 Outlook HTML 呈现问题。
在 Outlook 中，您可能会注意到图像下方由于额外的填充而出现额外的空间。 要消除这个不需要的空间，请添加以下样式：
样式=“显示：块；”
此调整消除了额外的填充，并确保其他企业邮箱客户端的结果一致。
但是，请记住，这种填充支持仅适用于标签
