Smarty邮件模板中部分Inline CSS属性未生效问题求助

问题根源 #

绝大多数邮件客户端（尤其是Outlook全系列、部分旧版Gmail）对CSS Flexbox的支持极差，不管是inline CSS还是头部<style>标签里的flex相关属性，都会被客户端解析引擎忽略。

替代实现方案 #

1. 替代justify-content: space-between + flex-wrap: wrap（container容器）

放弃flex布局，改用HTML表格模拟：

• 用<table style="width:100%; border-collapse:collapse;">作为外层容器
• 把原本的flex子元素放在<td>中，通过设置td的width、text-align控制元素位置，用空<td style="width:XXpx;">或者cellspacing来模拟间距
• 移动端换行需求：添加媒体查询（写在头部<style>里），在小屏设备下把<td>设置为display:block; width:100%;

2. 替代flex-direction: column + align-items: center（image链接）

用块级元素或单列表格实现垂直排列+居中：

• 方案一：把<a>标签改为块级容器，设置style="display:block; text-align:center;"，内部图片和文字自然垂直排列，且整体居中
• 方案二：用单列表格包裹，设置<table style="margin:0 auto; text-align:center;">，内部<tr><td>放置图片，再添加一行<tr><td>放置文字，实现垂直居中排列

注意事项 #

邮件样式开发必须优先考虑兼容性，尽量使用邮件客户端普遍支持的CSS属性（比如width、text-align、margin、padding）和HTML表格布局，避免依赖现代CSS特性。

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