Outlook 电子邮件呈现 CSS答案

【问题标题】：Outlook email rendering CSSOutlook 电子邮件呈现 CSS
【发布时间】：2018-10-15 15:12:22
【问题描述】：

我们有一个用 HTML/CSS 编写的相当复杂的电子邮件，它在 Apple 和 Google 产品上表现得很好，但是 Outlook 2016（和更早的产品）让我非常头疼。

如何在图像之间添加填充？

对于普通的 HTML，我只设置了 40px 的边框属性，但在 Outlook 中它被忽略了。

为什么 Outlook 在不同的文本集之间呈现额外的空白/换行符？

代码中没有写任何东西，但 Outlook 似乎突然添加了空行。

我确实找到了 this comprehensive list 的 mso 修复程序，但我目前不知道该尝试什么。

有什么建议吗？

【问题讨论】：

分享您的标记和 CSS。没有它就不可能回答你的问题。
Outlook 以自己的方式工作。正如@BenM 所说，如果您不共享代码，则真的不可能提供建议。这就是 Stack Overflow 的工作原理。
您可以通过以下链接修复图像填充间距：knowledge.hubspot.com/articles/kcs_article/email/…

标签： html css email outlook html-email

【解决方案1】：

看看https://www.campaignmonitor.com/css/
它至少可以让您更好地了解为什么事情不正常。

【讨论】：

【解决方案2】：

在为 Outlook 客户端呈现 CSS 样式时，我通常会考虑一些规则和解决方法。其中一些可能是您实施的重复。（因为没有提供）

1) 坚持使用内联样式而不是导入的样式表，除非您是服务器端渲染。 2）在outlook中，使用max-width确定邮件正文的宽度，其他客户端使用width。 3) 在标签内谨慎使用媒体查询。并非所有客户端都支持媒体查询。 4) 如果一切都失败了，使用针对特定 Outlook 客户端的 MSO 方法进行猴子补丁。 <!-- (gte mso 9)|(IE)

要在您的图像之间放置空间，请尝试将它们包装在自己的标签中并直接在那里定义您的样式。这听起来很乏味，但我发现这是一个可靠的解决方法。

希望这会有所帮助。

【讨论】：