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

标签 html css email outlook html-email

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

我尝试了各种形式的 outlook 条件标记,例如 < !--[if !mso] >

下面是我当前的代码:

    <!--[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]-->

最佳答案

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

View possible solutions here

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

更新

作为@digitalmc在评论中指出,问题似乎与客户端评论中的 HTML 有关。

关于html - 使用 MSO 条件 &lt;!--[if !mso]> 时 Outlook.com 中的空 HTML 电子邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21759254/

相关文章:

html - HTML 规范本身的 API?或者简单的方法来获取规范?

javascript - jQuery 巨型菜单显示一些连接速度较慢的 block 。如何修复它?

html - 我想显示 HTML 页面而不显示图像。但是代码试图错误地打开图像

email - 如何在 Ubuntu 上更改电子邮件的发件人姓名

c# - Nancy:如何在没有上下文的情况下渲染 Html

html - 如果我创建 Image 对象但没有将其添加到 DOM 中,它是否会将图像 src 下载到用户页面中?

javascript - 如何在悬停时用关键帧动画文本替换文本?

html - 我可以从 mailto : link which is prepopulated with an image? 创建电子邮件吗

email - 为什么 CR 和 LF 在电子邮件中一起出现如此重要?

javascript - 防止 LI 上没有子 UL 的 "open"类