Outlook 2007-2019下HTML邮件模板600px宽度限制失效问题

Outlook 2007-2019使用Word作为渲染内核，对CSSmax-width属性、百分比宽度的解析逻辑和普通邮件客户端差异极大，且对表格语法的容错率极低，你的问题由三个核心原因导致：仅依赖max-width限制宽度、存在不规范的表格嵌套结构、图片属性写法不符合Outlook规范。

具体修改步骤 #

• 1. 新增Outlook专属条件注释，强制固定容器宽度
     在<head>的<style>标签后添加以下代码，仅在Outlook客户端生效：

<!--[if mso]>
<style type="text/css">
table {
  border-collapse: collapse;
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
}
.fixed-width-600 {
  width: 600px !important;
}
</style>
<![endif]-->

给所有你设置了width="600"的表格添加class="fixed-width-600"，同时补充内联样式style="width:600px;"，双保险确保宽度生效。

• 2. 修正图片属性写法
     Outlook不识别带px后缀的width属性值，把所有图片的width="600px"改为width="600"，同时给所有固定尺寸的图片补充内联宽度样式：

<img 
  src="你的图片地址"
  width="600"
  height="300"
  style="width:600px;height:300px;display:block;"
  alt="图片说明"
>

• 3. 修复不规范的表格嵌套
     原代码中存在<tr>下直接嵌套<table>的语法错误，Outlook无法正确识别该结构会导致宽度撑满，找到对应位置修改为规范结构：

<!-- 原错误写法 -->
<tr>
  <table style="margin: 0 7px">
    <!-- 内层表格内容 -->
  </table>
</tr>

<!-- 修改后正确写法 -->
<tr>
  <td>
    <table style="margin: 0 7px" width="100%" border="0" cellpadding="0" cellspacing="0">
      <!-- 内层表格内容 -->
    </table>
  </td>
</tr>

完成以上修改后，Outlook 2007-2019就会按照600px的固定宽度渲染模板，不会出现拉伸占满全屏的问题。

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