关于Amazon SES模板的技术咨询：背景图、类与布局支持问题

1. 表格行背景图无法显示的原因及解决方案 #

咱们先解决背景图的问题——邮件客户端对CSS的支持和网页浏览器差异极大，这是核心根源：

• <tr>标签的background-image属性几乎不被主流邮件客户端（比如Outlook、Gmail部分版本）支持，哪怕写了内联样式也没用，通常只有<td>标签的背景图能被多数客户端识别。
• 图片路径必须是公开可访问的HTTPS绝对链接，本地文件路径（比如./bg.jpg）肯定不行，HTTP链接也可能被邮件客户端出于安全考虑拦截。
• 部分客户端还要求同时补充background-repeat、background-size等属性，甚至需要配合VML代码才能兼容Outlook这类“顽固”客户端。

替代实现方案 #

把背景图移到<td>标签上，同时补充兼容代码：

<!-- 兼容多数客户端的背景图写法 -->
<td style="background-image: url('https://your-public-https-image-url.com/bg.jpg'); background-repeat: no-repeat; background-size: cover; height: 200px;">
  <!-- 适配Outlook的VML兼容代码 -->
  <!--[if gte mso 9]>
  <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 600px; height: 200px;" src="https://your-public-https-image-url.com/bg.jpg" />
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height: 200px;">
  <v:fill opacity="0%" color="#ffffff" />
  <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div style="height: 200px; width: 100%;">
    <!-- 这里放单元格内容 -->
  </div>
  <!--[if gte mso 9]>
  </v:textbox>
  </v:rect>
  </v:image>
  <![endif]-->
</td>

2. Amazon SES是否支持CSS类？ #

SES本身并不限制你使用CSS类，但绝大多数邮件客户端会忽略<style>标签里的类定义，只认内联样式（直接写在标签的style属性里）。这就是你觉得类无法被识别的原因——不是SES的问题，是邮件客户端的兼容性限制。

如果想通过类来简化样式维护，可以先写带类的代码，再用工具把类样式自动转成内联样式，再导入到SES模板里。

3. Amazon SES是否支持Grid/Flex布局？ #

SES本身不限制，但几乎所有主流邮件客户端（尤其是Outlook系列）都不支持Grid或Flex布局。邮件模板的行业标准还是用嵌套表格来实现布局，这是目前唯一能保证在所有客户端里正常显示的方式。

如果强行用Grid/Flex，大概率会在Outlook、部分Gmail版本里出现布局混乱的情况，建议放弃这类现代布局方式，回归表格布局。

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