Microsoft Outlook 2010忽略mso条件注释

时间:2018-01-11 14:36:40

标签: outlook html-email outlook-2010

在我的电子邮件的<head></head>我的HTML中:

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

不应在Outlook中解析此<style>块,但在PC上的Outlook 2010中进行测试时,该表具有红色边框。我有什么不对的吗?

1 个答案:

答案 0 :(得分:2)

这是不正确的:

<!--[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>
祝你好运。