Question

我正在使用一些HTML / CSS和VML代码来使大多数电子邮件客户端中的按钮呈现一致。由于Outlook不支持圆角处理，因此我必须添加一些VML代码才能实现此效果。我设法解决了大多数对齐问题，但是我无法弄清楚按钮顶部/底部的间距来自何处以及如何消除它？

我能够使用此bulletproof email button generator和Microsoft's reference site的一些VML代码

我之所以不使用防弹生成器，是因为负责向电子邮件中添加内容的人员不是技术人员，因此，我试图通过尽可能少地将其暴露给代码来最大程度地减少问题。另外，我了解在某些Outlook客户端上可能无法跟踪对VML按钮的点击。

也可以找到类似的问题here，但是提供的解决方案对我而言不起作用，或者我可能忽略了某些东西？

下面是我正在使用的代码。请注意，VML按钮的背景色已设置为绿色，而要用作按钮的表为蓝色。我这样做是因为它很容易排除故障。

到目前为止，我设法确定了文本本身周围的奇怪填充是来自标签上的内联CSS的，但是我无法弄清楚VML按钮顶部和底部的那些随机行的位置来自。

 <!-- button -->
                      <div align="center" class="float-center" >
                     <!--[if mso]>
                       <v:roundrect
                         xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
                         <v:stroke color="#1e6db1"/>
   
                         <center>

                     <![endif]-->
            <table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
             
              <tr style="padding:0;text-align:left;vertical-align:top">
               <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
                <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
                 
                  <tr style="padding:0;text-align:left;vertical-align:top;">
                   <td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">

                    <a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;"> 
                      <span style="color:#fefefe;">
                      Finance &rsaquo;
                      </span>
                     </a>
                      
                    </td></tr></table></td></tr></table>
                        
                           <!--[if mso]>
                         </center>
                      </v:roundrect>
                     <![endif]-->
                     </div>
                    <!-- end button -->

Answer 1

通常，VML东西会不必要地增加文件大小。我将其用作按钮代码，并且适用于所有主要的石蕊客户：

  <table class="button"  border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
    <tr>
      <td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
        <a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
        SHOP NOW
        </span></a>
      </td>
    </tr>
  </table>

Litmus在按钮上也有这篇超级有用的文章：

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

VML电子邮件按钮中的间距问题

1 个答案: