Outlook.com HTML电子邮件中条件注释的可靠解决方案

时间:2013-09-23 12:16:33

标签: css email outlook html-email email-templates

我在这里和其他地方看到过建议的方式来设置条件评论以使用Outlook.com,但由于下面详述的另一个已知问题,我收到空白的电子邮件。参考下面的两个代码示例,我想看看是否有人可以解决这个问题。

第一个例子:

<!--[if mso]><!-- --> 
<style type="text/css">


#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }


</style>
<!--<![endif]--> 

上述代码导致Outlook.com中出现空白屏幕,即使此处的其他帖子引用了<!--[if mso]><!-- -->与Outlook.com配合使用。我知道在注释中有任何HTML标记存在任何问题,但如果条件放在style标记中,则它也不起作用。奇怪的是,下面的代码似乎在某种程度上起作用。

<!--[if mso]><!-- --> 
<style type="text/css">


#learn-left { width: 350px; max-width: 350px; }
#learn-right { width: 165px; max-width: 165px; }


</style>
<![endif]--> 

我还应该注意我有这个代码的原因是Outlook 2000和2003兼容性,所以我不能使用媒体查询作为替代解决方案。

4 个答案:

答案 0 :(得分:4)

那些说你可以做到这一点的网站是错误的。 Outlook.com会吃掉你的条件评论及其中的任何内容。一段时间让我很头疼。

对于需要使用条件注释的事情,我发现最好的办法是拥有常规的条件注释部分,还包括另一个表行/列,或者你有什么类似class="outlookcom"的类(在td上)并将其隐藏display:none。然后,在<style>标记中,您可以使用ecxoutlookcom定位该隐藏行(Outlook将所有分类标记的前缀加上'ecx')并使用display:block !important将其显示在outlook.com上

答案 1 :(得分:3)

我尝试了这个,但它对我不起作用。它在屏幕上显示了错误的评论标签。

<!--[if !gt mso 9]><!-- -->
/* css here */
<!--<![endif]-->
<!--[endif]-->

这对我有用。我在电子邮件上用酸测试了它。似乎工作得很好。

<![if !mso]> 

<div>
This shows on all clients but not outlook 2007, 2010, 2013.
Works fine on outlook.com.
</div>

<![endif]>

<!--[if gte mso 9]>

<div>
This only shows on outlook 2007, 2010, 2013
</div>

<![endif]-->

我 有关更多信息,请尝试搜索“microsoft downlevel reveal条件评论”

答案 2 :(得分:1)

感谢OP中给出的提示,我刚刚发现了一个潜在的修复方法,即“Outlook.com”和#34;问题:双端评论。

而不是:

<!--[if !gt mso 9]><!-- --> /* css here */ <!--<![endif]-->

试试这个

<!--[if !gt mso 9]><!-- --> /* css here */ <!--<![endif]--> <!--[endif]-->

似乎大多数网络客户端都会忽略最后一个结束评论(毕竟它仍然是一个有效的评论栏),但outlook.com赢了,所以你得到所有的电子邮件客户端注意到评论部分,对于outlook.com,这意味着没有空白的电子邮件。显然请谨慎使用,但是通过我对Litmus的有限测试,它看起来效果很好。

答案 3 :(得分:1)

我不知道使用CSS隐藏/显示是否是最好的路线,因为并非所有电子邮件客户端都会处理/尊重该css(我在Outlook Windows客户端测试了一个版本,但它不起作用)。我认为Outlook.com使用条件分支的原因是人们使用的语法略有偏差。当我更正我的语法时,代码在Outlook.com和Outlook中正确呈现Windows客户端。我还尝试了iphone Outlook应用程序,内置电子邮件应用程序的iphone和icloud(web),并且代码呈现正确。

需要注意的一点是,如果您在IIS上使用razor脚本,请务必将if!mso包装在元素中,以便IIS知道不会将其作为razor脚本进行处理。这是我的代码片段:

<!--[if mso]>code to render in the Outlook client<![endif]-->
<text><!if !mso]>code to render in Outlook.com<![endif]></text>