Outlook桌面端HTML邮件模板对齐异常问题技术咨询

• Outlook桌面端（Windows版本）采用Word作为HTML渲染引擎，对CSS的支持度极低，你当前代码中<td>设置的display: block属性不被Outlook支持，会破坏原生表格单元格的布局逻辑，导致对齐异常。
• 你给<p>标签同时设置了width: 100%和margin-left: 20px，Outlook的盒模型计算逻辑和标准浏览器不同，100%宽度+左侧外边距会导致内容实际宽度超出父容器，换行后第二行及之后的内容会忽略外边距直接顶到容器最左侧，就是你看到的不对齐效果。
• <td>上重复设置的对齐属性和宽度属性在Outlook渲染时产生冲突，进一步放大了布局异常。

调整布局逻辑，把边距从<p>转移到<td>上，移除<td>的display: block属性，去掉<p>上多余的width: 100%设置，适配Outlook的渲染规则，修改后的代码如下：

<tr style="background-color: #eaeaea;">
  <td align="left" bgcolor="#eaeaea" class="one-hundred-percent paragraph-top-padding" style="Margin: 0 auto; padding:0 0 0 20px;vertical-align: middle; width: 100%; text-align: left;" width="100%">
    <p class="body-text-font" style="-moz-hyphens:none;-webkit-hyphens:none; Margin: 0;  margin:0; padding: 0; padding-top: 4px; color:#414042;font-family:'Locator', 'Open Sans', Helvetica,Arial,sans-serif;font-size:16px; hyphens:none;line-height:19px;overflow-wrap:normal; text-align:left; word-break:normal; font-weight: normal;">
      [DataClasses] - Compromised data: Dates of birth, Email addresses, Genders, Names, Passwords, Phone numbers, Physical addresses
    </p>
  </td>
</tr>

调整说明 #

• 移除了<td>的display: block属性，保留原生表格单元格的渲染逻辑，适配Outlook的渲染规则
• 把原来<p>的margin-left: 20px改成了<td>的padding-left: 20px，避免盒模型计算溢出问题
• 移除了<p>上的width: 100%属性，内容会自动适配父容器宽度，换行后所有行都会保持统一的左侧缩进，符合预期效果
• 保留了其他所有原有样式和类名，不影响其他端的适配效果

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