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

【问题标题】：Reliable solution for conditional comments in Outlook.com HTML emailsOutlook.com HTML 电子邮件中条件注释的可靠解决方案
【发布时间】：2013-09-28 08:04:41
【问题描述】：

我在这里和其他地方看到了设置条件 cmets 以与 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 一起使用，上述代码也会导致 Outlook.com 中出现空白屏幕。我知道在 cmets 中包含任何 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 兼容，因此我不能使用媒体查询作为替代解决方案。

【问题讨论】：

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

【解决方案1】：

那些说你可以做到的网站是错误的。 Outlook.com 会吃掉您的条件 cmets，以及其中的任何内容。让我头疼了一阵子。

对于需要使用条件 cmets 的事情，我发现最好的办法是有常规的条件注释部分，但也包括另一个表格行/列或者你有什么像 class="outlookcom" 这样的类（在td) 并用 display:none 隐藏它。然后，在您的 <style> 标签中，您可以使用 ecxoutlookcom 定位隐藏行（outlook 在所有分类标签前添加“ecx”）并使用 display:block !important 为 outlook.com 显示它

【讨论】：

谢谢。现在试试这个。很高兴听到即使有“修复”，我并不是唯一一个在条件 cmets 上没有运气的人。
我知道这是一个适合家庭的地方，但现在我真的很想击败整个 Outlook.com 团队，尤其是他们的项目经理。

【解决方案2】：

我试过这个，但它对我不起作用。它在屏幕上显示杂散的评论标签。

<!--[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 显示条件 cmets”

【讨论】：

【解决方案3】：

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

需要注意的一点是，如果您在 IIS 上使用 razor 脚本，请务必将 if !mso 包装在元素中，以便 IIS 知道不将其作为 razor 脚本处理。这是我的代码 sn-p：

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

【讨论】：

【解决方案4】：

感谢 OP 中给出的提示，我刚刚发现了“空白 Outlook.com”问题的潜在解决方法：双端 cmets。

而不是这个：

 /* css here */ 

试试这个

 /* css here */  

似乎大多数网络客户端会忽略最后的结束评论（毕竟它仍然是一个有效的评论块），但 Outlook.com 不会，因此您会让所有电子邮件客户端都注意到评论部分对于 outlook.com，这意味着没有空白电子邮件。显然要谨慎使用，但从我通过 Litmus 进行的有限测试来看，它看起来效果很好。

【讨论】：