如何修复Outlook中HTML邮件宽度渲染异常问题

1. 先核对MSO条件语句的语法（最容易踩坑） #

Outlook桌面版只识别严格格式的MSO条件注释，写错一个符号都会导致失效，必须严格遵循：

<!--[if mso]>
<表格/容器代码>
<![endif]-->

• 注意开头的<!--[if mso]>和结尾的<![endif]-->，括号、感叹号、连字符一个都不能错；
• 条件内必须用HTML属性设置固定宽度（比如<table width="600">），不能用CSS的width:600px——Outlook桌面版优先识别HTML属性，忽略内嵌CSS。

正确的嵌套示例：

<!--[if mso]>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td>
<![endif]-->

<!-- 你的邮件核心内容：外层容器设为 <table style="width:100%; max-width:600px; margin:0 auto;" cellpadding="0" cellspacing="0" border="0"> -->

<!--[if mso]>
    </td>
  </tr>
</table>
<![endif]-->

2. 必须用表格作为核心布局容器 #

Outlook桌面版完全不支持flex/grid布局，对div的宽度控制也极不稳定，整个邮件必须基于表格嵌套搭建：

• 最外层表格要加align="center"属性，确保在Outlook里居中；
• 非MSO环境（比如移动端、网页邮箱）用CSS的width:100%; max-width:600px;做自适应。

3. 排查冲突的属性/样式 #

• 不要给外层元素加width="100%"的HTML属性，只在CSS里设置width:100%——MSO条件里的固定宽度表格会被这个属性覆盖；
• 避免在HTML属性里用min-width/max-width，Outlook完全不识别这些属性，只放在CSS的非MSO环境里用。

4. 快速验证条件语句是否生效 #

在MSO条件里加一个显眼的测试样式，比如背景色：

<!--[if mso]>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#ff0000;">
  <tr>
    <td>
<![endif]-->

如果Outlook里显示红色背景，说明条件生效，问题出在宽度设置的其他细节；如果不显示，直接检查条件语句的拼写格式。

5. 额外注意事项 #

• 必须用<!DOCTYPE html>作为文档声明，非标准DOCTYPE会导致Outlook解析混乱；
• 所有样式尽量用内嵌style属性，不要用外部样式表，Outlook几乎不支持外部CSS；
• Outlook 2016+版本虽支持部分CSS，但仍优先HTML属性，所以要双管齐下：MSO环境用表格width属性，非MSO环境用CSS的max-width。

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