Microsoft Outlook 2010 忽略 mso 条件注释答案

【问题标题】：Microsoft Outlook 2010 ignoring mso conditional commentsMicrosoft Outlook 2010 忽略 mso 条件注释
【发布时间】：2018-06-20 22:18:48
【问题描述】：

在我的电子邮件 HTML 的 <head></head> 中，我有：

<!--[if !mso]><!-->
<style>
    .contentTable {
        border: 1px solid #f00;
    }
</style>
<!--<![endif]-->

此<style> 块不应在 Outlook 中解析，但在 PC 上的 Outlook 2010 中测试时，表格有红色边框。是不是我做错了什么？

【问题讨论】：

标签： outlook html-email outlook-2010

【解决方案1】：

这是不正确的：

<!--[if !mso]><!-->

试试这个：

<!--[if !mso]><!-- -->

以您的代码为例，这将从 Outlook 中隐藏：

<!--[if !mso]><!-- --><style type="text/css">
  .contentTable {border: 1px solid #f00;}
</style><![endif]-->

此代码仅在 Outlook 中显示：

<!--[if (gte mso 9)|(IE)]><style type="text/css">
  .contentTable {border: 1px solid #f00;}
</style><![endif]-->

我在 Litmus 中测试了以下代码。在现代电子邮件客户端中，您会看到一个蓝色框。在 Outlook 2007-2010、2013、2016 中，您将看到一个红色框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Outlook Images</title>
</head>
<body style="background: #ffffff !important;">
<table>
  <tr>
<td>
    <!--[if !mso]><!-- -->
    <img src="http://via.placeholder.com/300x300/0000ff/?text=Modern+Email" alt="Modern+Email" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <!--<![endif]-->
    <!--[if gte mso 9]>
    <img src="http://via.placeholder.com/300x300/ff0000?text=Outlook" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
    <![endif]-->
    </td>
  </tr>
</table>
</body>
</html>

https://jsfiddle.net/wallyglenn/5hruzos5/

祝你好运。

【讨论】：

Outlook 忽略该代码块正是我想要的。不过，Outlook 仍在解析该条件内的所有内容。
我看错了你的问题。而不是这个：，试试这个：。我在 Litmus 中对此进行了测试，它在 2010 年有效。我重写了上面的答案并发布了更好的示例代码。祝你好运。
分享爱。很好的答案。