html在outlook桌面端显示有缝隙的问题

背景

有一个邮件编辑器，类似一个小的建站工具，左边组件，中间渲染，右边属性编辑。可以复制、导出为html，这个html可以直接用来发邮件

场景

用户拿到这个html，通过outlook桌面端可以进行导入整个html

问题：用户在平台依次往下放了几张图片，在平台和浏览器预览是正常的。但是导入到outlook中，两张图片之间不连续，会有一段白的空隙

原因

Outlook 使用 Microsoft Word 渲染引擎：

1. Line-height 问题

Word 引擎会将 <img> 视为行内元素，并根据父元素的 line-height 在图片下方添加空间。

bug.html 中的问题代码：

<td style="width:600px;">
  <img ... style="...font-size:13px;" ...>
</td>

• <td> 缺少 line-height:0

• 图片的 font-size:13px 会导致 Outlook 添加额外行高

2. Display:block 不完全生效

虽然图片设置了 display:block，但 Word 引擎不完全遵守这个规则。

3. 表格间距属性

Outlook 需要显式的 mso-line-height-rule:exactly 来强制精确行高控制。

解决

• 在 MJML 生成阶段为图片组件附加一个固定 css-class，并在 <mj-head> 中注入 Outlook 专用样式。通过条件注释确保样式只在 Outlook 生效。

• 仅对图片组件生效，避免误伤文本单元格

<mj-raw>
<!--[if mso]>
<style>
  .outlook-image-fix { line-height:0; mso-line-height-rule:exactly; }
  .outlook-image-fix td { line-height:0; mso-line-height-rule:exactly; }
  .outlook-image-fix img { display:block; line-height:0; }
</style>
<![endif]-->
</mj-raw>`