Outlook 2010 HTML 电子邮件中链接的背景颜色答案

【问题标题】：Background color on link in Outlook 2010 HTML emailOutlook 2010 HTML 电子邮件中链接的背景颜色
【发布时间】：2013-08-19 10:38:58
【问题描述】：

此链接中的背景色（红色）仅应用于文本，而不是整个链接。

链接也有填充。

这是针对 Outlook 2010 的。

有谁知道用背景色填充链接的方法吗？

这是一张图片：

<a href="#" class="btn" style="font-size: 13px; border: 1px solid #c5c4c4; color: #3c3c3c; padding: 7px 25px; display: inline-block; border-radius: 5px; font-weight: bold; text-decoration: none; background-color: red; background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);">
  Accept
</a>

这是可读格式的css：

font-size: 13px;
border: 1px solid #c5c4c4;
color: #3c3c3c;
padding: 7px 25px;
display: inline-block;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
background-color: red;
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);

【问题讨论】：

标签： html css html-email outlook-2010

【解决方案1】：

我最终将锚点放到了它自己的表格中并设置了 td 的样式以获得背景和填充。

<table class="btn-table">
    <tr>
        <td style="font-family: arial,helvetica,sans-serif; font-size: 13px; border: 1px solid #c5c4c4; padding: 7px 25px; border-radius: 5px; font-weight: bold; background: #e3e2e2; background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);"><a href="#" class="btn" style="display: block; color: #3c3c3c; text-decoration: none;">Accept</a></td>
    </tr>
</table>

【讨论】：