Outlook邮件HTML免责声明显示异常求助：图片格式错乱

问题出在邮件客户端的CSS兼容性上，尤其是Microsoft Outlook这类客户端，对现代CSS支持极差：

• position: relative/absolute、background-size这类属性基本不识别，还会剥离<style>标签里的类样式；
• 你代码里的尺寸值没带单位（比如height: 110），导致渲染时尺寸乱套；
• 部分客户端会强制缩放外部图片甚至拦截显示。

解决办法必须贴合邮件HTML的兼容标准：

核心修改方向 #

• 弃用CSS定位，改用表格布局：邮件客户端对表格的支持是100%的，所有布局用<table>、<tr>、<td>实现，这是邮件开发的行业惯例；
• 所有样式内联：别用类选择器，把样式直接写在元素的style属性里；
• 兼容背景图显示：用VML代码适配Outlook，同时保留CSS背景兼容其他客户端；
• 尺寸加单位：所有宽高值必须带px，避免渲染歧义。

修改后的可用代码 #

<tr>
  <!-- 替换[背景图实际宽度px]为你背景图的真实宽度，比如600px -->
  <td style="position: relative; width: [背景图实际宽度px]; height: 110px;">
    <!-- 兼容Outlook的VML背景图代码 -->
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[背景图实际宽度px]; height:110px;">
      <v:fill type="tile" src="https://www.douglas-scott.co.uk/storage/downloads/mwLPJ1KUs9YYEPTLfI3FaF84iaeXQjxDLvHcSLKh.png" color="#ffffff" />
      <v:textbox inset="0,0,0,0">
    <![endif]-->
    <div style="position: relative; width: 100%; height: 110px;">
      <!-- 左侧图片 -->
      <img src="https://www.douglas-scott.co.uk/storage/downloads/QRIe6dIZLotRovMPQosPFm1lqOBGeF5hPEZdFqJQ.png" 
           alt="SS22" 
           style="position: absolute; top: 5px; left: 10px; height: 100px; max-height: 100px; border: 0; text-decoration: none;" />
      <!-- 右侧图片 -->
      <img src="https://www.douglas-scott.co.uk/storage/downloads/l4BjlWxpIbGBzzBKQr12CiMl6zhMPAzU0sFd3NYI.png" 
           alt="£250 L2S Voucher" 
           style="position: absolute; top: 10px; right: 10px; height: 100px; max-height: 100px; border: 0; text-decoration: none;" />
    </div>
    <!--[if gte mso 9]>
      </v:textbox>
    </v:rect>
    <![endif]-->
  </td>
</tr>

额外注意事项 #

• 一定要把代码里的[背景图实际宽度px]换成你背景图的真实宽度，比如如果背景图是600px宽，就写600px；
• 测试的时候用专业邮件测试工具，覆盖Outlook、Gmail、Apple Mail这些主流客户端；
• 确保图片链接是公开可访问的，避免被邮件客户端拦截；
• 邮件开发尽量用HTML4时代的写法，别碰太新的CSS属性，兼容性第一。

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