Email API动态模板为何预览正常但实际发送后HTML样式差异大

• 样式兼容问题：绝大多数邮件客户端不支持<head>内嵌的<style>样式表、position定位属性、transform偏移属性，仅支持行内（inline）样式，你所用的定位逻辑属于标准网页特性，不在邮件客户端的兼容范围内，所以会出现预览正常、发送后显示异常的问题。
• 资源协议问题：你所用的图片链接是http协议，绝大多数邮箱服务商都会拦截非HTTPS的资源加载，也会导致图片显示异常。

邮件场景下实现图片叠加文字的最高兼容方案是使用<table>表格布局，将图片设为单元格背景，直接在单元格内放置居中文字，所有样式都写为行内样式，修正后的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 外层表格100%宽度适配 -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <!-- 背景图同时用原生background属性和行内background-image做多端兼容 -->
    <td background="https://cdn.mcauto-images-production.sendgrid.net/1714a3d54002df2a/a0f350e5-2a93-4de4-9d6b-a747ccb068a0/626x240.png" width="100%" height="240" style="background-image:url('https://cdn.mcauto-images-production.sendgrid.net/1714a3d54002df2a/a0f350e5-2a93-4de4-9d6b-a747ccb068a0/626x240.png');background-size:cover;background-position:center;text-align:center;vertical-align:middle;font-size:32px;color:#000000;font-weight:600;">
      CA {{first_name}}
    </td>
  </tr>
</table>
</body>
</html>

如果对样式一致性要求极高，也可以选择直接把文字提前渲染到图片内，通过替换图片动态内容的方式实现，兼容性最好，不会出现样式错乱问题。所有邮件模板的样式都不要用类选择器、内部样式表，全部写为行内样式，避免被邮箱客户端过滤。

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