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

Question

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

在我的尝试中，我遇到了四种不同的方法来为非 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 和其他渲染引擎将如何解释它。

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

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

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

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

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

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

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

其他可能有用的资源:

• Different conditional comments examples
• Microsoft documentation about conditional comments
• 我写的一篇关于 Outlook rendering engine 的博文