Question

我最近开始致力于创建电子邮件模板，并遇到了一些我没有找到任何解释的问题。

我在buttons.cm中生成按钮，期望它们是防弹的，虽然它们对大多数客户来说都很棒，但它们在基于Web的Outlook客户端上失败了。

结果如下所示（稍作修改，稍后解释）

<table style="width: 100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
        <td style="font-family: arial;">
            <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00">
                <w:anchorlock/>
                   <center>
            <![endif]-->
                <a href="#" style="background-color:#72BC00;border-radius:4px;color:#ffffff;display:table;line-height:30px;text-align:center;font-size:14px;text-decoration:none;width:150px!important;-webkit-text-size-adjust:none; font-family: arial;">Learn More</a>
            <!--[if mso]>
                   </center>
                </v:roundrect>
            <![endif]-->
        </td>
    </tr>
</table>

我的目标是：

Screen shot of working version

但我得到的所有基于浏览器的Outlook客户端是：

Screen shot of failed version

问题在于失败的版本

单元格填充失败
按钮不再是链接，实际上所有样式都是从按钮中取出并应用于父表。
第一项实际上应该是最后一项，但它被移到顶部，并且没有任何明显的原因去除所有样式。

有解决方案吗？我还没找到任何东西。谢谢！

我在生成的按钮中添加了以下内容：单元格填充，将显示从inline-block更改为table（将按钮固定为100％宽度并允许在Outlook中居中显示文字），并使包含元素成为一个表，而不是div。

Answer 1

对于＃2，您要更新VML代码中的URL以及锚标记吗？ Outlook使用VML中的URL作为链接，而不是锚标记。

这会导致电子邮件中许多链接跟踪系统出现问题，这是我避免使用这些按钮的众多原因之一。我们已经说服大多数客户使用简单的CSS样式按钮，理解Outlook将会松散圆角。

Answer 2

Buttons.cm 是一个很好的资源，但它已经过时了。

我支持Outlook，但尽可能避免使用VML。我目前使用的是这样的东西：

<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
    <tr>
        <td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
            <a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
                &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">A Button</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->

所有 都很混乱，但这是所有客户普遍理解的。

第二个更简单的选择是使用border-width来伪造填充，如下所示：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">I am a button &rarr;</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

某些电子邮件客户端（主要是Outlook）不允许border-width超过12或15像素，这只适用于纯色，因此这有一些缺点。

防弹按钮的更多选项are on Litmus。

Answer 3

多年来，我一直在寻找答案，我可以做出方框链接，也可以做出这个词，但从来没有两者都可以，但是我认为这可能是答案。我已经用它发送了几封电子邮件，它似乎工作正常。

 <center>
    <table align="center" cellpadding="20px" cellspacing="0" width="100%">
        <tbody>
            <tr>
                <td align="center" style="padding: 15px;height: 60px; width: 100%" class="" ><br>
                <br>
                <a href="#" style="width:100%;text-decoration: none; color: #82c600; padding-top: 14px; padding-bottom: 14px; padding-left: 50px; padding-right: 20px; border: 3px solid #82C600;  font-size: 20px; font-weight: bold; font-family: Roboto, Arial, sans-serif" target="_blank">Find out more</a> <!--[if mso]>&nbsp;<![endif]--><br>
                <br></td>
            </tr>
        </tbody>
    </table>
</center>

防弹html电子邮件按钮

3 个答案: