SendGrid模板在Mac版Outlook Beta中列布局显示异常求助

问题说明 #

修改SendGrid邮件模板时碰到列布局兼容坑：模板在Windows端Outlook Beta、手机上显示都正常，但Mac版Outlook Beta桌面客户端里显示完全乱掉。试过移除所有百分比宽度、把内外边距换成cellpadding这些方法，都没搞定。

效果对比：

• Mac Outlook Beta显示：
• Windows Outlook Beta显示：
• SendGrid预览效果：

排查思路和解决办法 #

1. 给表格加固定布局强制规则 #

Mac Outlook Beta用的是WebKit内核，但对表格布局的自动计算有bug，必须强制固定布局：

• 父表格加style="table-layout: fixed; border-collapse: collapse;"，同时明确写死表格总宽度（像素值）
• 每个<td>同时设置HTML属性width="XXX"和内联样式style="width: XXXpx;"，双重保障列宽

2. 彻底放弃CSS浮动，全用表格嵌套 #

邮件布局别用float属性，Mac Outlook Beta对浮动的解析完全不靠谱，老老实实靠表格嵌套来做列布局，这是邮件开发的通用准则。

3. 内外边距要双管齐下 #

别只靠CSS的padding或者HTML的cellpadding，要同时设置：

• 表格加cellpadding="0" cellspacing="0" border="0"清除默认间隙
• 单元格里再用内联style="padding: Xpx;"控制内边距，避免单一方式失效

4. 删掉可能搞事的样式 #

• 把max-width、min-width全删掉，Mac Outlook Beta对这俩属性的解析会乱改列宽，直接用固定宽度就行
• 别用CSS的margin，邮件里用空单元格或者表格内边距代替，margin在很多客户端里都不生效

5. 代码示例修正（拿常见错误场景举例） #

如果你的原代码是这样：

<table>
  <tr>
    <td style="width: 200px;">左侧列</td>
    <td style="width: 400px;">右侧列</td>
  </tr>
</table>

改成这样试试：

<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed; width: 600px; border-collapse: collapse;">
  <tr>
    <td width="200" style="width: 200px; padding: 0;">左侧列</td>
    <td width="400" style="width: 400px; padding: 0;">右侧列</td>
  </tr>
</table>

6. 测试工具辅助 #

用SendGrid自带的测试功能，或者专业邮件测试工具针对Mac Outlook Beta预览调整，一步步试到布局正常。

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