如何针对性适配Windows Mail 10/11且不影响Outlook桌面端？

问题说明 #

我现有一段代码hack，可在多数暗色模式客户端中保持黑底白字，但Windows Mail 10和11除外。<!--[if mso 16]>条件语句对Outlook（365、2021）桌面端有效，但Windows Mail 10/11会适配<!--[if !mso 16]>块中的CSS，导致显示异常。需要解决两个问题：

• 是否存在专门仅针对Windows Mail 10/11的MSO条件代码？
• 有没有其他方法可分别为Outlook（365/2021暗色模式）和Windows Mail应用样式？

原始代码 #

样式代码 #

<!--[if gte mso 16]>
    <style>
    .keep-white {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 #FFFFFF 0 100000\,100000 #FFFFFF 0 100000";
color:#000000 !important;
}  
    </style>  
<![endif]-->
<style>
u + .body .gmail-screen { background:#000; mix-blend-mode:screen; }
u + .body .gmail-difference { background:#000; mix-blend-mode:difference; }
</style>

HTML结构 #

<!--[if (gte mso 9)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" border="0" style="width:640px;background-color:#000000;" role="presentation">
<tr>
<td align="center">
<![endif]-->

    <table role="presentation" style="width:100%;max-width:640px;Margin:0 auto;" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center">
      <tr>
       <td class="body" style="background: linear-gradient(to bottom, #000000 0%, #000000 100%);max-width:640px;" width="100%" valign="top" align="center">
                 <!--[if gte mso 9]>
                 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;" fillcolor="#000000">
                 <v:fill type="gradient" color2="#000000"/>
                 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                 <center>
                 <![endif]-->
        <table role="presentation" style="width:100%;max-width:640px;Margin:0 auto;" cellspacing="0" cellpadding="0" align="center">
             <tr>
              <td style="padding:40px 10px 40px;" align="center">
         <p style="padding:0;margin:0;font-family:'Open Sans',Helvetica, Arial,sans-serif;font-size:24px;line-height:34px;color:#ffffff;text-align:center;" class="txt16">
  <!--[if mso 16]><strong style="color:#ffffff;" class="keep-white"><![endif]-->
  <!--[if !mso 16]><!-- --><strong style="font-weight:400;color:#ffffff;" class="gmail-screen"><span class="gmail-difference"><!--<![endif]-->

Combo text hack. Works everywhere except Windows 10 &amp; 11 mail.

<!--[if mso 16]></strong><![endif]-->
<!--[if !mso 16]><!-- --></span></strong><!--<![endif]-->
        </p>
            </td>
           </tr>
       </table>
                 <!--[if gte mso 9]>
                 </center>
                 </v:textbox>
                 </v:rect>
                 <![endif]-->
        </td>
    </tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

解决方案 #

1. 不存在专门针对Windows Mail 10/11的官方MSO条件语句 #

Windows Mail对MSO条件的解析与Outlook重叠，无法通过单一MSO条件精准区分两者。但可以通过以下两种方法实现样式隔离：

2. 方法一：利用VML支持差异 #

Outlook桌面端支持VML，而Windows Mail不支持。可以在Outlook专属样式中使用VML相关的MSO属性，Windows Mail会自动忽略这些代码；同时针对Windows Mail编写通用CSS样式。

3. 方法二：利用CSS特性查询（推荐） #

Windows Mail基于Chromium/EdgeHTML内核，支持-ms-ime-align:auto这类微软专属CSS特性，而Outlook桌面端不支持。通过@supports查询可以精准命中Windows Mail：

修改后的样式代码

<!--[if gte mso 16]>
    <style>
    /* Outlook 365/2021专属样式 */
    .keep-white {
        mso-style-textfill-type:gradient;
        mso-style-textfill-fill-gradientfill-stoplist:"0 #FFFFFF 0 100000\,100000 #FFFFFF 0 100000";
        color:#000000 !important;
    }
    </style>
<![endif]-->
<style>
/* 非MSO客户端通用样式 */
u + .body .gmail-screen { background:#000; mix-blend-mode:screen; }
u + .body .gmail-difference { background:#000; mix-blend-mode:difference; }

/* Windows Mail 10/11专属样式 */
@supports (-ms-ime-align:auto) {
    .body .gmail-screen,
    .body .gmail-difference {
        color: #ffffff !important;
        background: #000000 !important;
        mix-blend-mode: normal !important;
    }
}
</style>

修改后的HTML文本部分

给需要适配的元素增加专属类，确保Windows Mail能正确识别：

<p style="padding:0;margin:0;font-family:'Open Sans',Helvetica, Arial,sans-serif;font-size:24px;line-height:34px;color:#ffffff;text-align:center;" class="txt16">
  <!--[if mso 16]><strong style="color:#ffffff;" class="keep-white"><![endif]-->
  <!--[if !mso 16]><!-- --><strong style="font-weight:400;color:#ffffff;" class="gmail-screen"><span class="gmail-difference windows-mail-fix"><!--<![endif]-->

Combo text hack. Works everywhere except Windows 10 &amp; 11 mail.

<!--[if mso 16]></strong><![endif]-->
<!--[if !mso 16]><!-- --></span></strong><!--<![endif]-->
</p>

关键说明 #

• @supports (-ms-ime-align:auto)是Windows Mail的专属特性查询，不会影响Outlook或其他客户端。
• 强制使用!important可以覆盖Windows Mail暗色模式的自动颜色反转逻辑。
• 测试时需在Windows Mail 10/11和Outlook 365/2021中分别验证，避免样式冲突。

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