如何创建兼容全邮件服务商的左右文本行？Outlook转Gmail对齐异常解析

Outlook桌面端在转发邮件时会自动重构HTML内容，当它误判文本带有RTL（从右到左）语言属性时，会给<td>内的文本强制包裹<p align="right">和<span dir="RTL">标签。这些新增元素的内联样式与方向属性优先级高于<td>的align属性，直接导致原本左对齐的内容被改成右对齐。

要实现稳定的左右分栏布局，需要从样式强制覆盖、避免自动重构、适配客户端特性三个维度优化代码：

优化后的代码示例 #

<table align="center" width="600" border="0" cellpadding="10" cellspacing="0" role="presentation">
  <tr>
    <!-- 左列：强制左对齐+锁定LTR方向 -->
    <td align="left" width="50%" height="40" bgcolor="pink" 
        style="text-align: left !important; direction: ltr !important;">
      <span style="direction: ltr; text-align: left;">Left Column Text</span>
    </td>
    <!-- 右列：强制右对齐+锁定LTR方向 -->
    <td align="right" width="50%" height="40" bgcolor="pink" 
        style="text-align: right !important; direction: ltr !important;">
      <span style="direction: ltr; text-align: right;">Right Column Text</span>
    </td>
  </tr>
</table>

关键优化点说明 #

• 强制样式优先级：给<td>添加!important标记的内联text-align和direction，直接覆盖Outlook自动生成的样式
• 避免自动包裹：用<span>包裹文本内容，防止Outlook自动生成<p>标签破坏布局
• 适配Outlook特性：去掉height属性的px单位（Outlook对带单位的高度支持不稳定），添加role="presentation"减少邮件客户端对表格的额外处理
• 锁定文本方向：全局设置dir="ltr"避免Outlook误判RTL语言，若需支持RTL内容可单独给对应元素设置dir="rtl"

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