邮件模板中背景图上HTML CTA的Outlook对齐问题修复求助

问题根源 #

1. 原代码针对旧版Outlook（mso12/mso14）的VML圆形按钮设置了错误的top:1180px，导致CTA被大幅偏移
2. mso条件注释内的HTML存在语法错误：<td style="padding: 0 22px 0px 0px; valign="top" align="center">中valign属性的引号未正确转义，导致样式失效
3. VML元素的相对定位与外层表格的padding规则冲突，破坏了对齐逻辑

修复方案 #

• 移除VML圆形按钮中不合理的top/left相对定位，改用v:textbox的inset属性控制内边距，配合内部表格的统一对齐规则
• 修正mso条件注释内的语法错误，确保所有属性引号正确闭合
• 统一VML和标准HTML的CTA尺寸、字体样式，避免出现显示差异
• 简化嵌套表格层级，减少冗余代码

修复后完整代码 #

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td bgcolor="#FFFDFB" style="padding:0;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="center" background="https://image.e.iqos.com/lib/fe3915707564067f721579/m/1/fc4a7ecd-84fe-4a84-8b3a-41e0cdb7d157.png" class="mobile-hero" height="200px" style="background-repeat:no-repeat; background-size:100% auto;" valign="top" width="100%">
            <!--[if gte mso 9]>
              <img src="https://image.e.iqos.com/lib/fe3915707564067f721579/m/1/fc4a7ecd-84fe-4a84-8b3a-41e0cdb7d157.png" height="200" width="640" alt="" border="0" style="display: inline-block;" />                
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:relative;top:0;left:0;width:640px;height:200px;">
              <v:textbox inset="0,0,0,0" style="v-text-anchor:middle;">
            <![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="padding:110px 10px 0; text-align:center;" valign="middle">
                  <table align="center" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center" valign="top">
                        <!--[if mso | gte mso 9]> 
                          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" alias="CTA" style="height:52px;v-text-anchor:middle;width:160px;color:#ffffff;" arcsize="50%" strokecolor="#000001" fillcolor="#ffffff" class="darkmode_white">
                            <w:anchorlock/>
                            <center style="color:#000001;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:20px;"><strong>%%voucher_code%%</strong></center>
                          </v:roundrect>
                        <![endif]-->
                        <!--[if !mso]><!-->
                        <a alias="CTA" class="darkmode_white darkmode_black_background darkmode_border_white mobile-position-cta" href="#" style="background-color:#ffffff;border:2px solid #ffffff;border-radius:50px;color:#000001;display:inline-block;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:21px; text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;padding:10px 19px 14px 19px;" target="_blank"><strong>%%voucher_code%%</strong></a>
                        <!--<![endif]-->
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <!--[if gte mso 9]>
              </v:textbox>
              </v:rect>
            <![endif]-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关键说明 #

• 针对Outlook的VML元素不再使用相对定位，而是通过外层v:textbox的v-text-anchor:middle实现垂直居中，配合表格的padding:110px 10px 0控制垂直位置
• 合并了mso版本的VML代码，避免重复设置不同版本的Outlook规则，减少冗余
• 修正了所有语法错误，确保样式属性正确解析
• 标准HTML的CTA保留原有样式，保证在非Outlook客户端的显示效果不变

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