html - 防弹 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>

我的目标是:

Screen shot of working version

但是对于所有基于浏览器的 outlook 客户端，我得到的是:

Screen shot of failed version

问题在于失败的版本

1. 单元格填充失败
2. 按钮不再是链接，实际上所有样式都取自按钮并应用于父表。
3. 第一项实际上应该是最后一项，但无缘无故地移到了顶部，并去除了所有样式。

有解决办法吗？我还没有找到任何东西。谢谢!

我在生成的按钮中添加的是:单元格填充，将显示从 inline-block 更改为 table(修复按钮宽度为 100% 并允许在 outlook 中居中文本)，并使包含元素成为表格，而不是 div。

Answer 1

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 .