Outlook 2010，使用<a> tag as a button css</a>

Question

我使用的链接标记在我的电子邮件中看起来像一个按钮。标签的css如下。

<a href="#">Submit</a>

a.submit{
 background: none repeat scroll 0 0 #FF9900;
    border: 1px solid #FF9900;
    color: #FFFFFF;
    display: inline-block;
    padding: 6px;
    text-decoration: none;


}

除Outlook外，链接样式无处不在。只有文本获得背景颜色

我在谷歌+电子邮件中也发现了同样的问题。它们的按钮在outlook中显示了相同的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,output

Answer 2

编辑：

不幸的是，Outlook支持大致相当于IE5兼容HTML的东西。这太可怕了。这是关于Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007的详细MSDN文章，我认为这对Outlook 2010没有太大影响。

老实说，我能够让outlook HTML看起来像我想要的唯一方法是使用大致HTML2标准标签和属性手动生成HTML，而不是使用CSS。一些CSS呈现，但它真的很受欢迎。

See CSS Support in Mail Clients - The Ultimate Guide

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

Answer 3

正如其他答案所暗示的那样，对Outlook 2007,2010和2013年真正普及的任何内容的支持都非常糟糕。这个按钮的主要问题是这些版本的Outlook不支持margin属性（他们使用MS Word作为渲染引擎，yuk！）Litmus explains this and the solution really well。

我设法创建了一个HTML table-based button，几乎可以在所有主要的电子邮件客户端中使用。

以下是供您参考的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

您尚未为自己的<a>标记分配一个类，但如果它仍然无效，因为某些电子邮件服务不允许某些CSS标记，请点击此处获取更多信息：http://www.campaignmonitor.com/css/