为什么 mso 条件下的 *_url 会破坏按钮？

Question

我有一个 Rails 项目需要发送一些电子邮件，电子邮件内有一个链接/按钮。在基于网络的电子邮件客户端和我的手机上，它显示正确，但在桌面版 Outlook 中，它显示代码而不是按钮。

/[if mso] <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#{crm_tasks_url}" style="height:62px;width:271px;v-text-anchor:middle;" arcsize="57%" stroke="false" fillcolor="#dc0030"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px">
%a{:href => "#{crm_tasks_url}", :style => "text-decoration:none;display:inline-block;color:#ffffff;background-color:#dc0030;border-radius:35px;width:auto;border-top:0px solid transparent;font-weight:undefined;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:15px;padding-bottom:15px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;text-align:center;mso-border-alt:none;word-break:keep-all;", :target => "_blank"}
  %span{:style => "padding-left:30px;padding-right:30px;font-size:15px;display:inline-block;letter-spacing:normal;"}
    %span{:style => "margin: 0; word-break: break-word; line-height: 30px;"}
      %strong BEKIJK TAAK
/[if mso] </center></v:textbox></v:roundrect>

上面的代码在 Outlook 中给出了以下结果：

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://localhost:3000/crm/taken" style="height:62px;width:271px;v-text-anchor:middle;" arcsize="57%" stroke="false" fillcolor="#dc0030"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px"> BEKIJK TAAK 

如果我将

/[if mso]

块内的 href 更改为：

http://localhost:3000/crm/taken

，它将按预期工作并显示按钮。

现在你会说：你已经有了解决方案，但是没有。我还收到了一封发送邀请令牌的邀请电子邮件，并且无法对该令牌进行硬编码。

我正在使用 Rails 7，我在 Rails 6 中也有一个项目，它也发送带有链接/按钮的电子邮件，并且工作正常。我复制了完整的电子邮件视图，但仍然遇到问题。不确定这是否与 Rails 版本有关。

Answer 1

不确定 Rails 的 bug，但有一种替代方法可以将 href 从 VML 中取出，值得尝试：

<!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:62px;width:271px;v-text-anchor:middle;" arcsize="57%" stroke="false" fillcolor="#dc0030" alt="" role="presentation">
            <w:anchorlock/>
            <center>
            <![endif]-->
            <a href="https://www.google.com" style="background-color:#dc0030;border-radius:25px;color:#ffffff;display:inline-block;font-size:16px; line-height: 50px;font-weight: bold;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;" class="buttonlink">
                Button Text
            </a>
            <!--[if mso]>
            </center>
            </v:roundrect>
        <![endif]-->

这方面的风险也较小，因为您不必尝试并记住在两个地方更新 URL。