浏览器与邮件客户端中CSS定位文本显示差异问题求助

问题根源 #

大部分邮件客户端（尤其是Outlook系列、部分旧版Gmail）对CSS的position: relative和position: absolute支持极差，甚至直接忽略这些定位规则。浏览器能正常解析的叠加逻辑，在邮件客户端里会回到默认文档流，导致文本被挤到图片下方。

解决办法 #

• 用表格布局实现叠加（最兼容方案）
  邮件客户端对HTML表格的兼容性几乎是100%，可以通过表格背景+单元格文本的方式实现文本叠加：

<table width="400" height="260" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-image:url('https://www.jquery-az.com/html/images/banana.jpg'); 
               background-size: cover; 
               vertical-align: bottom; 
               padding: 8px 0 8px 40px; 
               font-size: 60px; 
               color: white;">
      Some text
    </td>
  </tr>
</table>

注意：旧版Outlook不支持background-size，如果需要兼容，可以使用和表格尺寸完全匹配的图片，或者将图片作为表格的底层元素，再叠加一个透明的文本单元格。

• 条件注释做兼容降级
  针对不同邮件客户端输出不同代码，用微软的条件注释让Outlook加载表格版本，其他支持CSS的客户端保留原定位逻辑：

<!--[if mso]>
<table width="400" height="260" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-image:url('https://www.jquery-az.com/html/images/banana.jpg'); 
               font-size: 60px; 
               color: white; 
               padding: 0 0 8px 40px; 
               vertical-align: bottom;">
      Some text
    </td>
  </tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<div style="height: 260px; position: relative; text-align: center; color: white">
    <img src="https://www.jquery-az.com/html/images/banana.jpg" alt="" width="400" 
      style="height:auto;display:block;" />
    <div style="position:absolute; bottom: 8px; font-size: 60px; left: 40px;">Some text</div>  
</div>
<!--<![endif]-->

• 邮件开发通用原则
  邮件开发要放弃对现代CSS属性的依赖，尽量使用内联样式，优先用表格布局实现复杂排版，避免position、float这类在邮件客户端支持率低的属性。

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