防弹html电子邮件按钮

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>

我的目标是：

工作版本的屏幕截图

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

失败版本的屏幕快照

问题是在失败的版本中

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

对此有解决方案吗？我还没找到什么。谢谢！

我在生成的按钮中添加了以下内容：单元格填充，将显示从内联块更改为表（修正按钮的宽度为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个像素，而且这只适用于纯色，因此有些缺点。

更多的防弹按钮选择在石蕊上。