HTML 电子邮件：!mso 条件技巧

Question

我是 HTML 电子邮件开发的新手，我正试图通过剖析 HTML 电子邮件上的 HTML 电子邮件来提高我对 HTML 电子邮件结构的理解 reallygoodemails.com".

在我的尝试中，我遇到了四种不同的方法来为非 Microsoft Outlook 的电子邮件平台创建条件回退。

版本 1。

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

版本 2.

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

版本 3.

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

版本 4.

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

谁能告诉我应该使用哪个版本并解释为什么该特定版本实际上可以跨平台工作？例如，您选择的回退语法如何欺骗 MSO 忽略代码？

Answer 1

条件注释是 Microsoft 在 Internet Explorer（直到 IE9）和 Word 的呈现引擎（由 Outlook 2007 及更高版本使用）中实现的机制。这个想法是通过常规 HTML 注释为渲染引擎隐藏内容，这样其他渲染引擎就看不到它。我将详细说明我使用的语法，然后再回到您观察到的语法之间的区别。

这是我用来从 Outlook 中隐藏内容的语法：

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

让我们一步一步来破解这个问题，看看 Outlook 和其他渲染引擎将如何解释它。

<!--：这是HTML评论的开头。每个渲染引擎都希望接下来的内容成为评论的一部分，并且不会在屏幕上显示它。
[if !mso]>：这是支持条件注释的渲染引擎（IE，Outlook）的条件。其他渲染引擎和浏览器只会将其视为纯文本，评论的一部分。但 IE 和 Outlook 将评估条件。这里的条件是!mso（不是mso）。 Outlook 会看到这个并认为“好吧，我是 mso！在找到 [endif] 语句之前，我宁愿忽略后面的所有内容。”
<!-->：这将关闭在步骤 1 中打开的 HTML 评论。Outlook 会忽略它，因为它是 !mso 内容的一部分。但是其他渲染引擎会理解这一点并认为“Ok，这个评论结束了。最好准备好执行并显示下一步。”
<style>…</style>：这是我们的HTML内容。它对 Outlook 是隐藏的，因为它仍然是 !mso 条件的一部分。其他渲染引擎将正常渲染它。
<!--: 这是HTML 评论的开头（再次）。
<![endif]：这是支持条件注释的渲染引擎（IE、Outlook）的结束条件语句。 Outlook 将对此进行评估并认为“好的，条件时间结束。那就回去工作吧。”。其他渲染引擎和浏览器只会将其视为纯文本，评论的一部分。
-->：这是在第 5 步打开的 HTML 评论的结尾。所有渲染引擎都会对此进行评估。

现在您可能会想：“为什么我们在第 3 步使用 ？”好吧，这是一个很好的技巧，可以考虑到其他支持条件注释的渲染引擎（如 Internet Explorer）。 IE 将看到 !mso 条件并认为“好吧，我当然不是 mso。让我们看看我的下一步是什么！”如果我们只是有一个结束 HTML 评论 (-->)，IE 会吓坏，因为它会看到一个没有开始的结束。这就是诀窍： 或 （正如您在 版本 2 和 3 中注意到的那样）。

至于你post编辑的其他版本的区别，版本1和2只使用<![endif]--> 作为结束语。这对于 Outlook 是正确的，但对于任何其他呈现引擎都是不正确的。幸运的是，他们无论如何都将其呈现为 HTML 评论。所以它最终可以正常工作，但它在标准方式下无效。

所以我的建议是始终使用以下语法来隐藏来自 The Outlooks 的内容：

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

如果您只需要在 The Outlooks 上显示内容：

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

其他可能有用的资源：

Different conditional comments examples
Microsoft documentation about conditional comments
一个博客 post 我写了关于 Outlook rendering engine

HTML 电子邮件：!mso 条件技巧

HTML Email: !mso conditional trick

html

html-email

conditional-statements