Rails邮件mso条件下动态URL致按钮失效，求解决方案

问题描述 #

在Rails 7项目中发送带按钮/链接的邮件时，按钮在网页端、手机端邮箱显示正常，但Outlook桌面端会直接显示VML代码而非渲染成按钮。核心矛盾是：当MSO条件块内的href使用动态URL（比如#{crm_tasks_url}）时出现故障，硬编码静态URL则能正常渲染按钮，但业务需求需要携带invitation_token这类动态参数，无法硬编码。此前Rails 6项目使用相同代码可正常运行。

相关Haml代码：

/[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 

解决方案 #

1. 修复MSO条件注释语法

Rails 7的Haml解析器对条件注释的处理更严格，原代码用Haml注释语法/[if mso]会导致动态URL解析异常，改用标准HTML条件注释+ERB内嵌代码的形式：

<!--[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">
<![endif]-->

%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>
<![endif]-->

• 用<!--[if mso]>替代Haml注释，确保Outlook能正确识别条件块；
• 用<%= crm_tasks_url %>直接嵌入动态URL，避免Haml对字符串插值的解析错误。

2. 确保VML标签完整闭合

异常显示结果中VML标签未完全闭合，标准条件注释能保证<v:roundrect>等标签的完整结构，避免Outlook因标签不完整而直接显示代码。

验证步骤 #

1. 发送测试邮件到Outlook桌面端，检查按钮渲染状态；
2. 查看邮件原始HTML源码，确认MSO块内的动态URL已正确替换，VML标签完整闭合。

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