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

时间:2014-04-04 02:18:09

标签: outlook height html-email

我正在尝试为我的电子邮件制作一个漂亮的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中呈现时,它看起来像这样:

enter image description here

我不关心圆边,但我希望高度能正常工作。有谁知道我怎么解决这个问题?我试图在没有运气的情况下强迫身高。

1 个答案:

答案 0 :(得分: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电子邮件中使用吗?在发送之前,您必须执行该服务器端。