Windows版Outlook中HTML邮件按钮与文本重叠问题求助

问题根源 #

Windows版Outlook依赖Word渲染引擎，对align="left"/"right"和valign="middle"的组合支持存在缺陷——align属性会被错误解析为类似浮动的行为，导致按钮脱离正常文档流，和同容器的文本重叠，而Mac版Outlook用WebKit渲染，不存在这个问题。

解决方案 #

1. 用表格嵌套替代按钮的align属性（最可靠方案）

Outlook对表格布局的支持是最稳定的，不要直接给按钮加align，而是把文本和按钮分别放在嵌套表格的单元格中，通过单元格的对齐属性控制位置，确保所有内容都处于正常文档流内：

<!-- 原右侧栏单元格，保留valign="middle" -->
<td valign="middle" style="padding: 20px;">
  <!-- 嵌套表格承载文本与按钮 -->
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <!-- 文本单元格 -->
      <td style="padding-right: 15px;">
        <p>你的正文内容</p>
      </td>
      <!-- 按钮单元格，通过align控制位置 -->
      <td align="right">
        <a href="#" style="display: inline-block; padding: 10px 20px; background: #0078D4; color: #fff; text-decoration: none;">按钮文本</a>
      </td>
    </tr>
  </table>
</td>

2. 给按钮添加块级容器并限制宽度（备选方案）

如果不想嵌套表格，可给按钮套一个带样式的容器，强制按钮占据独立空间：

<td valign="middle" style="padding: 20px;">
  <p>你的正文内容</p>
  <div style="width: auto; display: inline-block; margin-top: 10px;" align="right">
    <a href="#" style="display: inline-block; padding: 10px 20px; background: #0078D4; color: #fff; text-decoration: none;">按钮文本</a>
  </div>
</td>

注：该方案兼容性略逊于表格嵌套，仅在布局简单时使用。

3. 避免同一容器混用valign和align

Windows版Outlook的渲染逻辑对垂直对齐和水平对齐的组合处理混乱，将需要垂直居中的内容拆分为独立表格结构，分别控制对齐规则，能彻底规避这类兼容性问题。

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