Office 365中Outlook邮件条件HTML/CSS失效问题问询

为什么<!--[if !mso]><!-->没生效？ #

传统的Outlook条件注释（比如<!--[if mso]>/<!--[if !mso]>）只对Windows桌面版Outlook生效——因为只有它用的是基于Word的mso渲染引擎。而你测试的macOS桌面版、iOS版、Safari网页版Outlook，都是用WebKit类的现代渲染引擎，根本不识别这类条件注释，所以你的隐藏规则对它们完全不起作用。

跨Outlook客户端的隐藏方案 #

要让内容在非Windows Outlook客户端（macOS/iOS/网页版）隐藏，同时在Windows Outlook显示，得结合现代CSS特性和条件注释：

1. HTML结构：给需要控制的内容加自定义类

<div class="hide-for-non-windows-outlook">
  这段文字仅在Windows Outlook显示，其他Outlook客户端隐藏
</div>

2. CSS规则：针对非Windows Outlook客户端隐藏

/* 覆盖macOS/iOS/网页版Outlook */
_::-webkit-full-page-media, _:future, :root .hide-for-non-windows-outlook {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* 针对Windows Outlook的备用规则（确保它显示） */
<!--[if mso]>
<style>
.hide-for-non-windows-outlook {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  line-height: normal !important;
  font-size: inherit !important;
}
</style>
<![endif]-->

补充说明 #

• 网页版Outlook（包括Safari里的）和macOS/iOS版Outlook都支持现代CSS选择器，所以上述的WebKit特性选择器能精准命中它们。
• 如果你需要反过来（仅在非Windows Outlook显示），只需要把显示/隐藏规则调换即可。

内容的提问来源于stack exchange，提问作者Soham