Outlook 2007、2010、2013 和 2016 中的按钮答案

【问题标题】：Buttons in Outlook 2007, 2010, 2013 and 2016Outlook 2007、2010、2013 和 2016 中的按钮
【发布时间】：2017-03-07 18:17:24
【问题描述】：

我在我正在编码的电子邮件的按钮内得到了这个笔划。它只出现在 Outlook 2007、2010 和 2013 中，我不知道如何删除它？有任何想法吗？

代码：

`<a href="http://buttons.cm" style="color: #ffffff; background: #a52023; 
 border: 1px solid #a52023;  display: inline-block; font-family: tahoma;
 font-weight: 900; letter-spacing: 2px; font-size: 16px; border-radius: 80px;
 line-height: 60px; text-align: center; text-decoration: none; width: 275px;
 -webkit-text-size-adjust: none; mso-hide: all;">GET FREE WORKWEAR</a>`

【问题讨论】：

你能在这个按钮周围添加你的其余代码吗？另请注意，“mso-hide:all; css 实际上会使这个标签隐藏在大多数 Outlook 版本中，所以这实际上可能不是问题。

标签： html outlook html-email outlook-2010 outlook-2007

【解决方案1】：

是的，Windows Outlook 2007、2010、2013 甚至 2016 都对盒子模型的支持参差不齐。要获得一个好看的、可点击的按钮（不幸的是）需要更多的代码。

可能需要调整边框粗细、填充和&nbsp;s 的数量，但这应该可以解决您的问题，并为您提供一个在所有电子邮件客户端（包括 Outlook）上看起来不错的工作按钮：

<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
    <tr>
        <td style="border-radius: 3px; background: #a52023; text-align: center;">
            <a href="http://www.google.com" style="background: #a52023; border: 15px solid #a52023; font-family: tahoma; font-weight: 900; letter-spacing: 2px; font-size: 16px; mso-height-rule: exactly; line-height: 60px; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: 900; text-transform: uppercase;">
                &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">Get Free Workwear</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->

【讨论】：

【解决方案2】：

这适用于 Outlook（来源：https://gist.github.com/benknight/3316487）：

<span style="display: inline-block; text-align: center; background-color: #d21d00; border: 1px solid #5d150e; color: white;">
  <span style="display: inline-block; background-color: #d21d00; color: white; border-width: 1px 0 0 1px; border-color: #f3948a; border-style: solid;">
    <a style="display: inline-block; text-decoration: none; font-weight: bold; color: white; border-color: #d21d00; border-width: 5px 10px; border-style: solid; white-space: nowrap;" href="https://stackoverflow.com">Go to Stackoverflow</a>
  </span>
</span>

【讨论】：