HTML Email：解决 Outlook 中表格错位堆叠的问题

碧海醫心 2025-11-14 00:00:00 次阅读

本文旨在解决 html email 在 outlook 客户端中表格元素出现堆叠错位的问题。通过分析问题代码，指出 outlook 对 `div` 元素的 margin 处理存在兼容性问题，并提供修改方案，将 `div` 的 margin 转移到父 `td` 元素的 padding 上，同时优化宽度设置，以确保表格在 outlook 中正确并排显示。此外，还需注意避免重复边框导致的布局偏差。

在制作 HTML Email 时，经常会遇到在不同的邮件客户端显示效果不一致的问题，尤其是在 Outlook 客户端中。其中一个常见的问题是，原本应该并排显示的表格单元格（

）却出现了堆叠错位的情况，影响邮件的整体布局。本文将针对这个问题进行分析，并提供解决方案。

问题分析

问题的根源在于 Outlook 对某些 CSS 属性的支持存在差异。具体来说，Outlook 在处理 div 元素的 margin 属性时，可能会出现兼容性问题，导致原本应该占据一定宽度的 div 元素无法正确显示，进而影响其父元素

的布局，最终导致表格单元格堆叠。

解决方案

解决这个问题的一个有效方法是将 div 元素的 margin 属性转移到其父元素

的 padding 属性上。这样做可以避免 Outlook 对 div 元素 margin 属性的解析问题，从而确保表格单元格能够正确并排显示。

示例代码

以下是原始代码片段：

以下是修改后的代码片段：

代码解释

margin 转移到 padding： 将 div 元素的 margin: 23px; 移除，并将其添加到父元素的 style 属性中，即 style="padding:23px;"。
宽度优化： 将 div 元素的 width 属性从 89% 修改为 100%，使其占据整个元素的宽度。
注意事项
- 边框重复： 在原始代码中，表格和 div 元素都设置了边框。这可能会导致在 Outlook 中出现重复边框，影响布局。建议仔细检查代码，避免重复设置边框。如果需要边框，建议只在一个地方设置。
- Mso 条件注释： 代码中使用了