Microsoft Outlook 2010 忽略 mso 条件注释

Question

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

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

这个<style> 块在Outlook 中不应该被解析，但是在PC 上的Outlook 2010 中测试时，table 有红色边框。我做错了什么吗？

Answer 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/

祝你好运。

Microsoft Outlook 2010 忽略 mso 条件注释

Microsoft Outlook 2010 ignoring mso conditional comments

outlook

html-email

outlook-2010