如何为Outlook Classic设置CSS按钮样式，避免显示为高亮文本？

我完全懂你的痛苦！Outlook Classic（尤其是Windows桌面版，用Word的渲染引擎）对CSS的支持简直是邮件开发的噩梦，普通按钮或简单表格经常跑偏，把好好的按钮变成高亮文本。我之前也踩过一模一样的坑，下面给你几个经过实际项目测试的靠谱方案：

基础兼容方案（无圆角，全客户端通用） #

Outlook Classic完全不买<button>标签的账，对<a>标签的样式支持也很诡异，所以必须用嵌套表格来实现按钮，所有样式都要写内联（绝对不能用外部CSS或内嵌<style>）：

<!-- 基础兼容按钮 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="background-color: #007BFF; padding: 10px 20px;">
      <a href="#" style="color: #FFFFFF; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; text-decoration: none; display: inline-block;">
        Click Me
      </a>
    </td>
  </tr>
</table>

关键细节说明： #

• role="presentation"：告诉屏幕阅读器这个表格只是用来布局的，不是数据表格，提升无障碍访问性
• 用<td>的background-color：Outlook对<a>标签的背景色支持极差，把背景色放在<td>里才靠谱
• 给<a>加display: inline-block：确保padding和块级样式能生效，Outlook对纯inline的<a>样式支持有限
• 用十六进制全值颜色：比如#FFFFFF而不是white，Outlook对颜色关键字的支持不稳定
• 选Arial这类字体：Outlook对无衬线字体的兼容性最好，避免用太冷门的字体

带圆角的兼容方案（兼顾Outlook Classic和其他客户端） #

Outlook Classic不支持标准的border-radius，但它有自己专属的MSO属性mso-border-radius，我们可以用条件注释只给Outlook加载这个属性，其他客户端用标准圆角：

<!-- 带圆角的兼容按钮 -->
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="background-color: #007BFF; padding: 10px 20px; mso-border-radius: 5px;">
      <a href="#" style="color: #FFFFFF; font-family: Arial, sans-serif; font-size: 16px; text-decoration: none;">
        Click Me
      </a>
    </td>
  </tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="background-color: #007BFF; padding: 10px 20px; border-radius: 5px;">
      <a href="#" style="color: #FFFFFF; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; text-decoration: none; display: inline-block;">
        Click Me
      </a>
    </td>
  </tr>
</table>
<!--<![endif]-->

关键细节说明： #

• <!--[if mso]>：只针对基于MSO引擎的Outlook Classic版本（比如2016/2019/365经典视图），里面用mso-border-radius实现圆角
• <!--[if !mso]><!-->：针对所有非Outlook Classic的客户端，用标准的border-radius
• 这样写既能让Outlook Classic显示圆角，其他客户端也能正常渲染

避坑指南（一定要记牢） #

• 绝对不要用<button>标签：Outlook会把它渲染成系统默认按钮，完全不受你的CSS控制，直接变成丑丑的高亮文本
• 所有样式必须内联：Outlook Classic会忽略90%的内嵌<style>和外部CSS，哪怕是!important也没用
• 不要依赖border属性做边框：Outlook对border的样式（比如虚线、圆角）支持极差，如果需要边框，用嵌套表格模拟更靠谱
• 测试一定要用真实的Outlook桌面版：在线预览工具很多都模拟不准Outlook Classic的渲染，最好找一台装了Outlook的电脑测试

这些方案都是我在实际邮件开发中反复调试出来的，能保证在Outlook Classic里显示为正常的按钮，而不是高亮文本，同时在新Outlook、移动端和其他邮件客户端也能完美适配。

内容来源于stack exchange