本文旨在解决 html email 在 outlook 客户端中表格元素出现堆叠错位的问题。通过分析问题代码，指出 outlook 对 `div` 元素的 margin 处理存在兼容性问题，并提供修改方案，将 `div` 的 margin 转移到父 `td` 元素的 padding 上，同时优化宽度设置，以确保表格在 outlook 中正确并排显示。此外，还需注意避免重复边框导致的布局偏差。
在制作 HTML Email 时，经常会遇到在不同的邮件客户端显示效果不一致的问题，尤其是在 Outlook 客户端中。其中一个常见的问题是，原本应该并排显示的表格单元格（<td>）却出现了堆叠错位的情况，影响邮件的整体布局。本文将针对这个问题进行分析，并提供解决方案。
问题分析
问题的根源在于 Outlook 对某些 CSS 属性的支持存在差异。具体来说，Outlook 在处理 div 元素的 margin 属性时，可能会出现兼容性问题，导致原本应该占据一定宽度的 div 元素无法正确显示，进而影响其父元素 <td> 的布局，最终导致表格单元格堆叠。
解决方案
立即学习“前端免费学习笔记（深入）”；
解决这个问题的一个有效方法是将 div 元素的 margin 属性转移到其父元素 <td> 的 padding 属性上。这样做可以避免 Outlook 对 div 元素 margin 属性的解析问题，从而确保表格单元格能够正确并排显示。
示例代码
以下是原始代码片段：
<table role="presentation" width="600" style="width:100%;max-width:600px;background-color:#1C63AA;margin-left:auto;margin-right:auto;border:0;text-align:center;border-collapse:collapse;mso-line-height-rule: exactly; " align="center">
<tr>
<td align="center"><div style="text-align:center;font-size:0;width:89%;max-width:527px;margin:23px;">
<!--[if mso]>
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" width="527" style="width:527px;border-collapse:collapse;mso-line-height-rule: exactly;font-size:0;margin:23px;">
<tr>
<td width="264" align="left" valign="top" cellspacing="0" cellpadding="0" style="width:264px;border-right:1px solid #dadada;border-collapse:collapse;mso-line-height-rule: exactly; padding:0px;text-align:left;" align="left">
<![endif]-->
<div class="column" style="width:100%;max-width:263px;display:inline-block;vertical-align:top;text-align:center;border-right:1px solid #aaaaff;" align="middle">
<p style="font-family:sans-serif;text-decoration:none;font-size:12px;">text</p>
<p style="font-family:serif; font-size: 17px;">text2</p>
</div>
<!--[if mso]>
</td>
<td width="263" align="right" valign="top" cellspacing="0" cellpadding="0" style="width:263px;border-collapse:collapse;mso-line-height-rule: exactly; padding:0px;text-align:right;" align="right">
<![endif]-->
<div class="column" style="width:100%;max-width:263px;display:inline-block;vertical-align:top;text-align:center;">
<p style="font-family:sans-serif;text-decoration:none;font-size:12px;">text</p>
<p style="font-family:serif; font-size: 17px;">text2</p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
</td>
</tr>
</table>以下是修改后的代码片段：
<table role="presentation" width="600" style="width:100%;max-width:600px;background-color:#1C63AA;margin-left:auto;margin-right:auto;border:0;text-align:center;border-collapse:collapse;mso-line-height-rule: exactly; " align="center">
<tr>
<td align="center" style="padding:23px;"><div style="text-align:center;font-size:0;width:100%;max-width:527px;">
<!--[if mso]>
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0" width="527" style="width:527px;border-collapse:collapse;mso-line-height-rule: exactly;font-size:0;margin:23px;">
<tr>
<td width="264" align="left" valign="top" cellspacing="0" cellpadding="0" style="width:264px;border-right:1px solid #dadada;border-collapse:collapse;mso-line-height-rule: exactly; padding:0px;text-align:left;" align="left">
<![endif]-->
<div class="column" style="width:100%;max-width:263px;display:inline-block;vertical-align:top;text-align:center;border-right:1px solid #aaaaff;" align="middle">
<p style="font-family:sans-serif;text-decoration:none;font-size:12px;">text</p>
<p style="font-family:serif; font-size: 17px;">text2</p>
</div>
<!--[if mso]>
</td>
<td width="263" align="right" valign="top" cellspacing="0" cellpadding="0" style="width:263px;border-collapse:collapse;mso-line-height-rule: exactly; padding:0px;text-align:right;" align="right">
<![endif]-->
<div class="column" style="width:100%;max-width:263px;display:inline-block;vertical-align:top;text-align:center;">
<p style="font-family:sans-serif;text-decoration:none;font-size:12px;">text</p>
<p style="font-family:serif; font-size: 17px;">text2</p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
</td>
</tr>
</table>代码解释
- margin 转移到 padding： 将 div 元素的 margin: 23px; 移除，并将其添加到父元素 <td> 的 style 属性中，即 style="padding:23px;"。
- 宽度优化： 将 div 元素的 width 属性从 89% 修改为 100%，使其占据整个 <td> 元素的宽度。
注意事项
- 边框重复： 在原始代码中，表格和 div 元素都设置了边框。这可能会导致在 Outlook 中出现重复边框，影响布局。建议仔细检查代码，避免重复设置边框。如果需要边框，建议只在一个地方设置。
- Mso 条件注释： 代码中使用了 <!--[if mso]> 这样的条件注释，这是专门针对 Outlook 的 CSS hack。在编写 HTML Email 时，可以根据需要在条件注释中添加特定于 Outlook 的样式，以解决兼容性问题。
总结
通过将 div 元素的 margin 属性转移到父元素 <td> 的 padding 属性上，并进行适当的宽度优化，可以有效地解决 HTML Email 在 Outlook 中表格单元格堆叠错位的问题。在编写 HTML Email 时，需要充分考虑不同邮件客户端的兼容性，并采取相应的措施来确保邮件能够正确显示。
