电子邮件模板中的 HTML 表格按钮

Question

我正在尝试为我的电子邮件制作一个漂亮的 HTML 按钮（不想使用图像），并且我从 Facebook 获得了最初的设计理念，该按钮在我的浏览器中很好地呈现，但在 Outlook 中却没有。有谁知道我可以做些什么来解决它？

设计为on our site，按钮代码如下：

<td valign='middle' style='width:92px;padding-left:0px;text-align:right;white-space:nowrap; !important'>
<div style='height:32px !important;'>
    <a href='".site_url()."export/export_timesheet?id=".$timeID."' style='color:#3b5998;text-decoration:none;'>
        <table cellspacing='0' cellpadding='0' width='100%' height='33' style='border-collapse:collapse;border-width:1px;border-style:solid;display:block;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;font-size:14px;border-color:#2C729E;height:33px !important;'>
            <tbody>
                <tr><td height='7' colspan='3' style='line-height:7px;'>&nbsp;</td></tr>
                <tr>
                    <td width='16' style='display:block;width:16px;'>&nbsp;</td>
                    <td width='100%' style='text-align:center;'><a href='".site_url()."export/export_timesheet?id=".$timeID."' style='color:#2C729E;text-decoration:none;display:block;'><center><font size='3'><span style='font-family:Helvetica Neue,arial,sans-serif;font-style:normal;white-space:nowrap;font-size:14px;'><strong>Get PDF</strong></span></font></center></a></td>
                    <td width='16' style='display:block;width:16px;'>&nbsp;</td>
                </tr>
                <tr><td height='7' colspan='3' style='line-height:7px;'>&nbsp;</td></tr>
            </tbody>
        </table>
    </a>
</div>
</td>

但是当它在 Outlook 中呈现时，它看起来像这样：

我不关心圆边，但我希望高度能够正常工作。有谁知道我该如何解决这个问题？我试过强迫高度没有运气。

Answer 1

试试这个：

<table width="92" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="33" valign="middle" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #2C729E; border:1px solid #2C729E;">
      <a href="" style="color: #2C729E; font-weight: bold; text-decoration: none;">Get PDF</a>
    </td>
  </tr>
</table>

我在文本上而不是在<td> 本身周围有锚标记。我已经很久没有用这种方式测试了，所以我只发布了我知道有效的东西。

另外，您知道 javascript 不能在 html 电子邮件中使用吗？在发送之前，您必须在服务器端执行该内容。