在电子邮件模板中的背景图片上添加 HTML CTA

Question

我想在电子邮件模板的背景图像上添加 HTML CTA。我的代码在所有电子邮件客户端、移动和桌面上都能完美运行。仅在 Outlook 中 CTA 副本未正确对齐。添加代码和屏幕截图以供参考。

 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
 
  <tr>
   <td bgcolor="#FFFDFB" style="padding:0 0px 0px 0px;">
    <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">
                <![endif]--><table border="0" cellpadding="0" cellspacing="0">
         
          <tr>
             <td class="mobile-hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
           <td align="center" class="mobile-position" style="width: 100%; padding: 110px 10px 0px 0px;" valign="middle" width="100%">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
             
              <tr>
               <!--[if gte mso 9]>       
           <td style="padding: 0 22px 0px 0px; valign="top" align="center">
            <table align="center" cellspacing="0" cellpadding="0" border="0">              
               <tr>
                     <![endif]--><td align="center" valign="top">
                <div>
                 <!--[if mso 12 | mso 14]> 
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="#"  alias="CTA"  style="position:relative; top:1180px; left: 220px; 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 gte mso 15]>  
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="#"  alias="CTA"  style="position:relative;  top:100px; left: 240px; 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]--><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;mso-hide:all;padding: 10px 19px 14px 19px;" target="_blank"><strong>%%voucher_code%%</strong></a></div></td><!--[if gte mso 9]>    
  </tr>
              </table>
            </td>
   <![endif]--></tr></table></td>
          <td class="mobile-hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
         </tr></table><!--[if gte mso 15]>                 </v:textbox>                 </v:rect>                 <![endif]--><!--[if mso 12 | mso 14]>                 </v:textbox>                 </v:rect>                 <![endif]--></td></tr></table></td></tr></table>

Answer 1

高度为 52 像素，但行高为 20 像素。由于它在一行上，所以行高也设为 52px。