VML图片覆盖HTML内容问题求助（邮件模板兼容Outlook）

邮件客户端（尤其是Outlook）采用Word渲染引擎，和浏览器的WebKit/Blink逻辑差异极大，图片覆盖内容通常是以下兼容性问题导致，对应修复方案如下：

1. 图片未设置固定像素尺寸 #

浏览器会自动适配图片尺寸，但Outlook无法正确解析无明确尺寸的图片，极易导致图片拉伸溢出覆盖下方内容。

• 修复：同时给图片添加HTML属性和行内样式的固定宽高：

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" 
     alt="火烈鸟" 
     width="600" 
     height="400" 
     style="width:600px; height:400px; display:block; border:0;" />

2. 未使用表格布局 #

邮件布局必须依赖HTML表格，div+CSS的流式布局在Outlook中完全失效，会引发元素重叠错位。

• 修复：将图片和下方内容分别放在表格的独立单元格中：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <!-- 顶部图片区域 -->
  <tr>
    <td>
      <img src="..." width="600" height="400" style="display:block; border:0;" />
    </td>
  </tr>
  <!-- 下方内容区域 -->
  <tr>
    <td style="padding:20px 0;">
      <h2>Creating Email Magic</h2>
      <!-- 其他内容代码 -->
    </td>
  </tr>
</table>

3. 图片未设置display:block #

包括Outlook在内的部分客户端会给图片默认添加display:inline，导致图片下方出现额外空白，引发布局错位。

• 修复：在行内样式中强制声明display:block，消除默认行内元素间距。

4. 使用了Outlook不支持的布局属性 #

如果图片用了float、绝对/相对定位，Outlook无法解析这些属性，会直接导致元素重叠。

• 修复：完全放弃浮动和定位，仅用表格单元格控制布局，这是邮件布局的唯一可靠方式。

额外注意事项 #

• 所有样式必须写在行内，Outlook不支持外部样式表或<style>标签内的多数规则；
• 避免使用百分比高度，所有尺寸尽量用固定像素值；
• 测试时必须用Outlook客户端（桌面版+网页版），不能仅依赖浏览器预览。

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