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

前端之家收集整理的这篇文章主要介绍了css – Outlook.com HTML电子邮件中条件注释的可靠解决方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经在这里和其他地方看到了一种建议的方式来设置条件注释以使用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标记有任何问题,但如果条件放在样式标记中,它也不起作用.奇怪的是,下面的代码似乎在某种程度上起作用.

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

解决方法

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

对于需要使用条件注释的事情,我发现最好的办法是使用常规条件注释部分,还包括另一个表行/列,或者你有什么类似class =“outlookcom”(在td)并用display:none隐藏它.然后,在你的< style>中标签你可以用ecxoutlookcom(outlook预先’ecx’到你所有的分类标签)来定位那个隐藏的行,并使用display:block!important来展示它为outlook.com

原文链接:https://www.f2er.com/css/217781.html

猜你在找的CSS相关文章