Window Outlook端邮件HTML图文环绕的图片与文本边距显示异常问题

Windows桌面版Outlook采用独立的Word渲染引擎，不兼容现代CSS的流式排版规则，当前代码触发的三个典型兼容性问题直接导致布局错乱：

• 浮动图片上设置的display: block会被Word引擎识别为独立块级元素，直接丧失文本环绕能力，将后续文本挤压到图片下方
• 浮动元素上设置的CSS margin值会被Word渲染引擎完全忽略，无法实现图文16px的间距效果，最终出现图文贴边重叠的异常
• 单单元格内直接嵌套浮动图片与多段文本的结构，会被Word引擎错误解析文本块的默认外边距，进一步打乱整体排版间距

调整逻辑围绕两个核心：移除破坏浮动环绕的样式、用Outlook专属的条件注释实现间距控制，不影响其他邮件客户端的正常渲染。
替换后的完整代码：

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;margin: 0 0 40px 0;text-align: left;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center">
  <tr>
    <td style="-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
      <h2 style="font-size: 30px;font-weight: 500;text-align: center;line-height: 48px;margin: 40px 0 32px 0;-ms-text-size-adjust: 100%;">Topic one here</h2>
    </td>
  </tr>
  <tr>
    <td style="-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
      <!-- 兼容普通邮件客户端的浮动图片，移除原有display:block属性 -->
      <img 
        src="https://www.aesop.com/u1nb1km7t5q7/4uahoGkAUbKTdgi26UWS8U/d35893987804270676a1ab2a46ad2038/Our-Story-Carousel-1-Desktop-2880x1620.jpg" 
        align="left" 
        alt="Topic 1" 
        style="width: 250px;margin: 0 16px 8px 0;-ms-text-size-adjust: 100%;-ms-interpolation-mode: bicubic;"
      >
      <!-- 仅Windows Outlook识别的条件注释，用嵌套表格实现图片固定宽度与间距，替代不生效的CSS margin -->
      <!--[if mso]>
      <table border="0" cellspacing="0" cellpadding="0" align="left" width="266">
        <tr>
          <td style="padding: 0 16px 8px 0;">
            <img src="https://www.aesop.com/u1nb1km7t5q7/4uahoGkAUbKTdgi26UWS8U/d35893987804270676a1ab2a46ad2038/Our-Story-Carousel-1-Desktop-2880x1620.jpg" width="250" style="border:0;display:block;">
          </td>
        </tr>
      </table>
      <p style="margin:0 0 16px 0;font-size:16px;line-height:27px;color:#333;">
      <![endif]-->
      
      <p style="font-size: 16px;font-weight: medium;line-height: 27px;color: #333;margin: 0 0 16px 0;-ms-text-size-adjust: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique eros magna. Duis pretium finibus urna id vestibulum. Quisque sollicitudin eros ultricies, finibus lacus suscipit, viverra ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique eros magna. Duis pretium finibus urna id vestibulum. Quisque sollicitudin eros ultricies, finibus lacus suscipit, viverra ante.</p>
      <p style="font-size: 16px;font-weight: medium;line-height: 27px;color: #333;margin: 0 0 16px 0;-ms-text-size-adjust: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique eros magna. Duis pretium finibus urna id vestibulum. Quisque sollicitudin eros ultricies, finibus lacus suscipit, viverra ante.</p>

      <!-- 闭合Outlook条件注释的p标签 -->
      <!--[if mso]></p><![endif]-->
    </td>
  </tr>
</table>

• 设置了align="left"/align="right"实现环绕效果的图片，绝对不能添加display: block样式，否则Word引擎会将图片渲染为独立块级元素，彻底破坏文本环绕流
• 不要依赖图片元素的CSS margin控制图文间距，这类样式在Windows Outlook中100%会被忽略，必须用条件注释包裹的嵌套表格实现间距控制
• 所有嵌入图片必须写死width/height属性，否则Outlook会自动按照图片原始分辨率撑满容器，导致布局宽度异常

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