Outlook中HTML邮件<td>元素被挤至右侧的问题排查

问题根源 #

Outlook桌面版依赖Word的HTML渲染引擎，对现代CSS支持极差——你代码里的display:inline-block、max-width在Outlook里完全不生效，导致单元格宽度失控，文本被挤到右侧。浏览器能正常渲染是因为它支持标准CSS，但邮件客户端的兼容性逻辑和浏览器完全不同。

具体修复步骤 #

• 彻底移除display:inline-block：改用表格原生的单元格布局，这是邮件开发的标准兼容方案，所有主流客户端都能识别。
• 修正单元格宽度规则：不要混用width:100%和max-width，直接给图片列设置固定宽度（和图片尺寸匹配），文本列用width:100%占满剩余空间，同时添加Outlook专属的mso-width-percent属性确保百分比布局生效。
• 简化嵌套结构：去掉不必要的div包裹，把样式直接写在td上，减少渲染歧义。

修复后的代码 #

<table border="0" width="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0;">
  <tr>
    <td style="background-color:#fcc80d;padding:30px;">
      <table border="0" width="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0;">
        <tr>
          <!-- 图片列：固定宽度匹配图片尺寸 -->
          <td width="55" style="width:55px;mso-width-percent:0;">
            <img src="image.jpg" width="55" height="39" style="border:0;display:block;" alt="" />
          </td>
          <!-- 文本列：占满剩余宽度，添加左间距优化排版 -->
          <td style="padding-left:15px;mso-width-percent:100%;">
            <span style="font-size:18px;">LOREM IPSUM DOLOR SET AMET</span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

额外注意事项 #

• 给图片添加display:block，避免Outlook在图片下方自动生成多余空白。
• 用合并的padding属性替代上下左右分开的写法，减少代码冗余同时提升兼容性。
• 邮件布局优先使用table和td，尽量避免div，这是适配全客户端的核心原则。

内容的提问来源于stack exchange，提问作者M. Greco