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

时间:2014-02-13 16:01:20

标签: html css email outlook html-email

所以我在我的电子邮件中使用@ font-face而Outlook 2007,2011和2013给我带来了麻烦。所以我将@ font-face CSS包装在条件&lt; ! - [if!mso]&gt;标签,这适用于Outlook(桌面客户端)中的CSS特定样式,但这完全打破了我在outlook.com中的电子邮件。他们来自空白,因为没有内容!一个完全白色的虚无!

我尝试了各种形式的outlook条件标签,例如&lt; ! - [if!mso]&gt;

以下是我目前的代码:

    <!--[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中完全为空?

------更新:2014年2月18日我的解决方案------

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

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

1 个答案:

答案 0 :(得分:7)

最近,我遇到了outlook.com(@ hotmail和@live)电子邮件帐户的空白电子邮件问题。我们遇到的问题与我们的内联样式表中的CSS注释有关。基本上,修复空白电子邮件体验的是将CSS注释更改为服务器端注释(或完全删除它们)。如果我在CSS中有/* comment */之类的CSS评论,outlook.com会呈现空白电子邮件。

<强> View possible solutions here

此外,我个人认为在HTML电子邮件(或一般电子邮件)中使用外部样式表并不好。最好通过模板/电子邮件的<style></style>中的<head>标记添加CSS,或者进一步将相同的CSS内联到电子邮件中的每个HTML元素。以下是您不应在电子邮件中包含外部样式表的背景信息:

更新

正如@digitalmc在评论中指出的那样,问题似乎与在客户端评论中使用HTML有关。