4 回答
解决 Outlook 中的填充问题的一些工作,您可以使用与背景颜色相同的边框来为按钮创建填充。例如:
<a style="border:15px solid #FFAE00;background-color:#FFAE00;color:#FFF;font-size:14px; font-family:Arial;text-decoration:none" href="#">
Click Here
</a>
这仅适用于基本按钮样式。
编辑:
不幸的是,Outlook 支持的东西大致相当于 IE5 兼容的 HTML。这真的很可怕。这是有关Outlook 2007 中 Word 2007 HTML 和 CSS 呈现功能的详细 MSDN 文章,我认为 Outlook 2010 的变化不大。
老实说,我能够让 Outlook HTML 看起来像我想要的方式的唯一方法是使用大致 HTML2 标准标签和属性而不是使用 CSS 手动生成 HTML。一些 CSS 渲染,但它真的是命中注定。
请参阅邮件客户端中的 CSS 支持 - 终极指南
在上面的链接中,您可以看到background
Outlook 不支持 css 属性,因此您应该使用 Outlook 支持的CSS 属性background-color
。
正如其他答案所暗示的那样,对 Outlook 2007、2010 和 2013 中任何真正通用的东西的支持非常糟糕。这个按钮的主要问题是这些版本的 Outlook 不支持 margin 属性(他们使用 MS Word 作为渲染引擎,yuk!)Litmus 很好地解释了这个和解决方案。
我设法创建了一个基于 HTML 表格的按钮,该按钮适用于几乎所有主要的电子邮件客户端。
这是供您参考的 HTML:
<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
<tr>
<td bgcolor="#c62228" valign="middle" align="center" width="174">
<div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
<a href="#" style="text-decoration: none; color: #ffffff; border: 0; font-family: Arial, arial, sans-serif; mso-table-lspace:0; mso-table-rspace:0;" border="0">MY BUTTON</a>
</div>
</td>
</tr>
</table>
希望这可以帮助!