css - Outlook 2010，使用标签作为按钮 css

Answer 1

解决 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>

这仅适用于基本按钮样式。

http://jsbin.com/pohidedayo/edit?html，输出

Answer 2

编辑：

不幸的是，Outlook 支持的东西大致相当于 IE5 兼容的 HTML。这真的很可怕。这是有关Outlook 2007 中 Word 2007 HTML 和 CSS 呈现功能的详细 MSDN 文章，我认为 Outlook 2010 的变化不大。

老实说，我能够让 Outlook HTML 看起来像我想要的方式的唯一方法是使用大致 HTML2 标准标签和属性而不是使用 CSS 手动生成 HTML。一些 CSS 渲染，但它真的是命中注定。

请参阅邮件客户端中的 CSS 支持 - 终极指南

在上面的链接中，您可以看到backgroundOutlook 不支持 css 属性，因此您应该使用 Outlook 支持的CSS 属性background-color。

Answer 3

正如其他答案所暗示的那样，对 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>

希望这可以帮助！

Answer 4