Outlook.com HTML 电子邮件中条件注释的可靠解决方案 [英] Reliable solution for conditional comments in Outlook.com HTML emails

问题描述

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

I've seen here and elsewhere that a recommended way to set up conditional comments to work with Outlook.com, but because of another known issue detailed below I'm getting blank emails. Referencing the two code examples below I wanted to see if anyone had a reliable way around this issue.

第一个例子:

<!--[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 标签一起放置，它也不起作用.奇怪的是，下面的代码似乎在一定程度上起作用.

The above code causes a blank screen in Outlook.com even though other posts here have cited that <!--[if mso]><!-- --> works with Outlook.com. I know there is any issue with having any HTML tags inside comments, but if the conditional is placed with the style tag it doesn't work either. Strangely the code below seems to work to a degree.

<!--[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 兼容，所以我不能使用媒体查询作为替代解决方案.

I should also note the reason I have this code is for Outlook 2000 and 2003 compatibility so I can't use media queries as an alternative solution.

推荐答案

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

Those sites that say you can do that are wrong. Outlook.com eats your conditional comments, and anything inside of them. Gave me quite a headache for a while.

对于需要使用条件注释的事情，我发现最好的办法是拥有常规的条件注释部分，但还包括另一个表格行/列或诸如 class= 之类的类outlookcom"(在 td 上)并用 display:none 隐藏它.然后，在您的 <style> 标签中，您可以使用 ecxoutlookcom 定位该隐藏行(outlook 在所有分类标签前加上ecx")并使用 display:block !important 显示给outlook.com

For things where you need to use conditional comments, I found the best thing to do was to have the regular conditional comment section, but also include another table row / column or what have you with a class like class="outlookcom" (on the td) and hide it with display:none. Then, in your <style> tag you can target that hidden row with ecxoutlookcom (outlook prepends 'ecx' to all of your classed tags) and use display:block !important to show itfor outlook.com

这篇关于Outlook.com HTML 电子邮件中条件注释的可靠解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！