Outlook 2010，使用 <a> 标签作为按钮 css

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 之外的任何地方。只有文本才获得背景颜色

我在 google+ 电子邮件中也注意到了同样的问题。他们的按钮在 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,输出

Answer 2

编辑：

不幸的是，Outlook 支持与 IE5 兼容的 HTML 大致相同的内容。实在是太可怕了。这里有一篇关于 Outlook 2007 中的 Word 2007 HTML 和 CSS 渲染功能的详细 MSDN 文章，我认为这对于 Outlook 2010 来说没有太大改变。

老实说，我能够让 Outlook HTML 看起来像我想要的样子的唯一方法是使用大致 HTML2 标准标签和属性来手动生成 HTML，而不是完全使用 CSS。一些 CSS 渲染，但它确实是时好时坏。

查看邮件客户端中的 CSS 支持 - 终极指南

在上面的链接中，您可以看到 Outlook 不支持 css

background

属性，因此您应该使用 Outlook 中支持的

background-color

。

Answer 3

正如其他答案所暗示的那样，对 Outlook 2007、2010 和 2013 中真正通用的任何内容的支持非常糟糕。此按钮的主要问题是这些版本的 Outlook 不支持边距属性（它们使用 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

您还没有为您的

<a>

标签分配一个类，但如果它仍然不起作用，那是因为某些电子邮件服务不允许某些 CSS 标签，请在此处查看更多信息：http://www.campaignmonitor.com/css/