Question

我开发了一个自定义电子邮件模板，该模板使用媒体查询来定位小于480像素的设备。该电子邮件在每个电子邮件客户端和平台（Gmail，Yahoo！，Hotmail，Apple Mail，Thunderbird，Outlook 2003等）中的外观和显示都很完美 - 除了Outlook 2007到2013.

Outlook 2007到2013奇怪地选择媒体查询并使用给定的css声明为电子邮件设置样式。当我删除媒体查询时，它呈现完美。知道如何让Outlook忽略媒体查询吗？

以下是正在使用的媒体查询以及jsFiddle链接。将max-device-width更改为max-width以查看正在运行的媒体查询。

jsFiddle：http://jsfiddle.net/danimalnelson/uQ7kg/

@media only screen and (max-device-width: 480px) {

Answer 1

您可以强制Microsoft忽略部分代码：

<!--[!if gte mso 9]><!-->
 // This will be ignored by Outlook 2007
<![endif]-->

<!--[!if gte mso 15]><!-->
 // This will be ignored by Outlook 2013
<![endif]-->

<!--[if !mso]><!-->
 // This will be ignored by all Microsoft Outlook
<!--<![endif]-->

以下是Outlook version numbers

Answer 2

我一直认为：

<!--[!if gte mso 9]>
 // This WILL be rendered by Outlook 2007 as 'gte' means greater than or equal to
<![endif]-->

<!--[!if gt mso 9]>
     // This WON'T be rendered by Outlook 2007 as 'gt' means greater than
<![endif]-->

约翰。您是否有链接到您找到资源的位置，哪个mso编号与哪个Outlook版本相关？

是否有一个Microsoft页面，其中包含明确的mso数列表？

到目前为止，我最喜欢的资源是这个德国维基页面： http://de.wikipedia.org/wiki/Conditional_Comments

Answer 3

如果你想隐藏使用这个

<!--[if !mso]><!-->
// This will be ignored by all Microsoft Outlook give display:none
<!--<![endif]-->

并在媒体查询中写下display:block;

Answer 4

按照我的建议，不要重新发明轮子，使用一些已经测试过很多次的初学者模板已经解决了很多错误，例如 Antwort

Outlook 2007到2013显示设备媒体查询

4 个答案: