Outlook Web 忽略样式

Question

该代码在 Gmail 和 Outlook 中有效，但是当我使用 Outlook Web 版本（Outlook.com Edge、Windows 10）检查该按钮时，根本没有样式，并且 [if mso] 条件语句不起作用 -它只是不识别 Outlook。整个按钮本身看起来就像一个纯文本。

<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:100px;" 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]><!-- --><span style="font-size:14px;"><span style="font-family:Arial,Helvetica,sans-serif;"><a alias="" class="button" conversion="false" data-linkto="other" href="" style="color:#ffffff;text-decoration:none;background-color:#6BBB5E;width:100px;display:inline-block;font-size:16px;font-weight:normal;padding:10px 20px;/* bigger padding */
    text-align:center;/* color */
    color:#FFFFFF;/* Black text */
    border-radius:20px;/* Rounded corners */
    border:none;cursor:pointer;line-height:100%;" title="">Button text</a> </span></span><!--<![endif]--></td></tr></table>

那么我的条件语句中有什么可以改变的吗？

我尝试采用该代码，但没有成功。我也尝试更改条件 [if mso] 但没有帮助。

Answer 1

天哪，VML 和电子邮件客户端兼容性总是很有趣。

我认为问题在于所有 Outlook 版本不再支持 VML。仅部分支持。 VML 自 IE9 起就已被弃用，我相信他们一直在努力逐步淘汰它。您使用的 Web Outlook 可能是被淘汰的客户端之一。不幸的是，很难专门针对您提到的 Web 客户端。我相信它属于 MSO 16 (Outlook 2016)，其中还包括 Web Outlook、Windows 10 和 11 邮件，以及 Microsoft 365 和其他一些仍然使用 VML 的东西。

这是我工作的代码：

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

我所做的是，将开始和结束 VML 放在

mso

条件中，同时将 HTML 代码保留在 VML 渲染代码之间的注释之外。这样，如果客户端是 Outlook，它会尝试呈现 VML。如果它不是或无法渲染 VML，它仍然可以依靠非 mso 内容。