MSO条件注释中修改按钮padding无效，求Outlook邮件模板解决方案

问题根源 #

旧版Outlook（2007-2016）采用Word渲染引擎，对CSS类选择器的支持极有限，尤其不兼容em这类相对单位，且!important声明常失效。块级元素的padding属性在该环境下也容易被忽略，导致按钮显示异常。

修复方案 #

方案1：使用表格Cellpadding属性（最可靠） #

直接在MSO条件注释内为Outlook单独生成带cellpadding属性的按钮表格，完全避开CSS兼容性问题：

<!-- 通用按钮（适配网页版Outlook及其他客户端） -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td style="padding: 0.8em 0; background: #0078d4; border-radius: 4px;">
      <a href="https://your-link.com" style="color: #fff; text-decoration: none; display: block; text-align: center;">
        点击操作
      </a>
    </td>
  </tr>
</table>

<!--[if mso]>
  <!-- 旧版Outlook专属按钮 -->
  <table role="presentation" border="0" cellpadding="26" cellspacing="0" style="border-collapse: collapse;">
    <tr>
      <td style="background: #0078d4; border-radius: 4px;">
        <a href="https://your-link.com" style="color: #fff; text-decoration: none; display: block; text-align: center;">
          点击操作
        </a>
      </td>
    </tr>
  </table>
<![endif]-->

注：cellpadding="26"对应1.6em（默认字体16px时，1.6×16=26px），可根据你的字体大小调整数值

方案2：类选择器替换为PX单位 #

若想复用代码，将em替换为px单位，Outlook对固定单位的支持远好于相对单位：

<style>
  .button-td {
    padding: 0.8em 0; /* 适配非旧版Outlook */
  }
</style>

<!--[if mso]>
  <style>
    .button-td {
      padding: 26px 0 !important; /* 旧版Outlook适配 */
    }
  </style>
<![endif]-->

<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td class="button-td" style="background: #0078d4; border-radius: 4px;">
      <a href="https://your-link.com" style="color: #fff; text-decoration: none; display: block; text-align: center;">
        点击操作
      </a>
    </td>
  </tr>
</table>

关键注意事项 #

• 旧版Outlook完全不支持CSS变量、flex布局等现代特性，按钮必须用表格结构实现
• 避免在Outlook专属样式中使用em、rem等相对单位，全部改用px
• 若内联样式与类样式冲突，Outlook会优先使用内联样式，必要时可在MSO注释中直接重写内联属性

内容的提问来源于stack exchange，提问作者ptflo