Outlook Web版忽略按钮样式，[if mso]条件语句失效求助

问题 #

现有邮件按钮代码在Gmail、桌面版Outlook中样式显示正常，但在Windows 10系统Edge浏览器的Outlook Web版（Outlook.com）中样式完全失效，且[if mso]条件语句无法识别该环境，按钮仅显示为纯文本。调整代码及原有条件语句后仍无效果，需解决该兼容性问题。

原因 #

Outlook Web版（尤其是Edge浏览器环境下）不属于传统的MSO（Microsoft Office）桌面客户端范畴，因此无法识别<!--[if mso]-->这类仅针对桌面Office客户端的条件注释。同时，Web端邮件客户端对部分CSS属性的解析规则与桌面客户端存在差异，导致标准HTML按钮的样式无法正常渲染。

解决方案 #

仅修改条件语句无法完全解决问题，需要结合兼容Web端的HTML结构+增强型内联样式+多客户端条件适配来修复。以下是调整后的代码及关键修改点：

修改后的按钮代码 #

<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <!-- Set align to "left" -->
  <tr>
    <td>
      <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#6BBB5E" fillcolor="#6BBB5E">
          <w:anchorlock/>
          <center style="color:#FFFFFF;font-family:sans-serif;font-size:16px;">
            Button Text
          </center>
        </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:20px;background:#6BBB5E;width:140px;">
        <tr>
          <td align="center" valign="middle" style="padding:10px 20px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#FFFFFF;">
            <a href="#" style="color:#FFFFFF;text-decoration:none;display:block;width:100%;line-height:100%;">
              Button Text
            </a>
          </td>
        </tr>
      </table>
      <!--<![endif]-->
    </td>
  </tr>
</table>

关键修改点 #

• 替换inline-block为表格结构：Web端邮件客户端对display:inline-block的支持不稳定，改用嵌套表格实现按钮的背景、圆角和内边距，兼容性更强。
• 增强内联样式覆盖：将按钮的背景色、文字颜色、字体等属性直接写在表格单元格内，避免样式被客户端默认规则覆盖。
• 保留VML适配桌面Outlook：原有的[if mso]分支保留，确保桌面版Outlook仍能显示带圆角的VML按钮。
• 统一按钮宽度：将VML和表格的宽度统一为140px（包含内边距），避免两端显示不一致。

额外适配建议 #

如果仍存在Edge下Outlook Web的样式问题，可添加针对微软Web客户端的媒体查询样式（需放在<head>标签内）：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .outlook-web-button {
    border-radius:20px !important;
    background:#6BBB5E !important;
  }
}

同时给外层表格添加class="outlook-web-button"，强制Edge浏览器下的样式生效。

内容的提问来源于stack exchange，提问作者Deniss AKM.