使用 MSO 条件 <!--[if !mso]> 时 Outlook.com 中的空 HTML 电子邮件答案

【问题标题】：Empty HTML Emails In Outlook.com When Using MSO Conditional <!--[if !mso]>使用 MSO 条件 <!--[if !mso]> 时 Outlook.com 中的空 HTML 电子邮件
【发布时间】：2014-03-12 15:03:23
【问题描述】：

所以我在我的电子邮件中使用@font-face，而 Outlook 2007、2011 和 2013 给我带来了麻烦。因此，我将@font-face CSS 包装在条件标签中，这对于 Outlook（桌面客户端）中的 CSS 特定样式非常有用，但这完全破坏了我在 Outlook.com 中的电子邮件。它们是空白的，因为没有内容！一个完全白色的虚无！

我尝试过各种形式的 Outlook 条件标签，例如

下面是我当前的代码：

    <!--[if gte mso 9]>
       <style type="text/css">
          @import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
       </style>
    <![endif]-->

下面还有一个试金石测试，您可以看到结果：

https://litmus.com/pub/a49f7b4/screenshots

为什么这些电子邮件在 outlook.com 中完全是空的？

-----更新：2/18/2014 我的解决方案 ------

这似乎在所有平台上都能完美运行。一旦我从评论标签中删除了所有 HTML，一切都很好。

<!--[if !mso]><!-->
    <style type="text/css">
        @import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
    </style>
<!--<![endif]-->

【问题讨论】：

这是the best way我已经找到了在html电子邮件中做webfonts
我将 HTML 交给客户进行编辑，所以我必须让它变得简单。我发布了对我来说效果很好的解决方案。不过感谢您的评论。

标签： html css email outlook html-email

【解决方案1】：

最近，我遇到了 Outlook.com（@hotmail 和 @live）电子邮件帐户的空白电子邮件问题。我们遇到的问题与内联样式表中的 CSS cmets 有关。基本上，为我解决空白电子邮件体验的是将 CSS cmets 更改为服务器端 cmets（或完全删除它们）。如果我的 CSS 中有 /* comment */ 这样的 CSS cmets，outlook.com 将呈现空白电子邮件。

View possible solutions here

此外，我个人认为在 HTML 电子邮件（或一般的电子邮件）中使用外部样式表并不是一种好的做法。最好通过模板/电子邮件的<head> 中的<style></style> 标签添加您的CSS，或者进一步将相同的CSS 内联到电子邮件中的每个HTML 元素。以下是有关为什么不应在电子邮件中包含外部样式表的一些背景知识：

Can you link to a CSS file from an email?
http://beaker.mailchimp.com/inline-css（手动内联工具）
http://www.benchmarkemail.com/help-FAQ/answer/Common-HTML-Email-Coding-Mistakes

更新

正如@digitalmc 在 cmets 中指出的那样，问题似乎与您的客户端 cmets 中包含 HTML 有关。

【讨论】：

是的，我所有的样式都内联或放在标题中。我将@import 用于@font-face 方法只是因为它得到更广泛的支持，然后将@font-face 直接放入电子邮件中。我确实有很多 CSS cmets，所以我会尝试删除它们并看看会发生什么。感谢您的评论。
也许您可以尝试使用图像替换而不是@font-face？在有条件的 Outlook 标记内，您使用 CSS 隐藏普通文本并替换为图像。我假设您的 @font-face 用于标题或其他短语，而不是大量内容。
是的，这很好，只是它实际上是针对客户将每周更改的副本块。我正在为他们构建模板，他们（营销人员）将更新副本。感谢您的帮助。
事实证明你是对的（大部分）！谢谢你的帮助。问题出在 CSS 中的我的 cmets 中。问题不在于 cmets 本身，而在于将代码放在注释标签中。一旦我从注释标签中删除了代码（这是一个简单的我用来描述一些东西），它就被修复了。再次感谢您为我指明正确的方向。