Freemarker邮件头尾模板在多客户端（含Outlook）样式不一致问题求助

我之前踩过邮件模板适配的大坑，尤其是Outlook这个“祖宗级”客户端，给你几个经过实战验证的方案，应该能解决你的痛点：

1. 先搞定Outlook里的Logo放大错位问题 #

Outlook桌面版（尤其是2016及更早版本）完全无视CSS的max-width，只认图片标签的原生width和height属性，还得加微软专属的mso属性强制约束。你可以在Freemarker模板里这么写Logo标签：

<img src="${logoUrl}" alt="Company Logo" 
     width="200" height="80"  <!-- 这里设你需要的固定基准尺寸 -->
     style="width:100%; max-width:200px; height:auto; display:block;"
     mso-width-alt="200" />

• 原生width/height是给Outlook桌面版看的，防止它乱拉伸图片
• 行内样式的width:100%; max-width:200px是给Gmail、Apple Mail等现代客户端做响应式适配
• mso-width-alt是微软专属属性，进一步锁死Outlook的图片宽度，避免意外错位
• display:block能去掉图片默认的底部间隙，减少布局偏移

2. 重构Header/Footer：用表格布局+行内样式锁死样式 #

邮件客户端对CSS的支持极度分裂，Outlook的渲染引擎还是Word那套，绝对不要用div布局，全部用table做结构，而且所有样式必须写在行内，或者用微软专属条件注释针对Outlook单独适配。

比如你的header.ftl可以改成这种结构：

<!--[if mso]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center">
  <tr>
    <td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin:0 auto;">
  <tr>
    <td style="padding:20px 0; text-align:center;">
      <!-- 上面的Logo代码放在这里 -->
    </td>
  </tr>
  <!-- 其他header内容（导航、欢迎语等）都用tr/td嵌套，样式全写在行内 -->
</table>
<!--[if mso]>
    </td>
  </tr>
</table>
<![endif]-->

这里的条件注释是给Outlook桌面版用的，强制它使用固定宽度的表格；现代客户端则通过max-width实现响应式布局。

3. 用Freemarker宏封装可复用样式，减少重复修改 #

既然产品需求经常变，你可以把header/footer里的通用样式封装成Freemarker宏，改一处就能同步所有调用的地方，不用反复修改多个模板。

比如定义一个通用的邮件区块宏：

<#macro emailSection padding="20px 0" textAlign="left" bgColor="#ffffff" fontSize="14px">
  <tr>
    <td style="padding:${padding}; text-align:${textAlign}; background-color:${bgColor}; font-family:Arial, sans-serif; font-size:${fontSize}; color:#333333;">
      <#nested>
    </td>
  </tr>
</#macro>

然后在header.ftl里调用：

<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; margin:0 auto;">
  <@emailSection padding="20px 0" textAlign="center">
    <!-- Logo放在这里 -->
  </@emailSection>
  <@emailSection padding="10px 20px" bgColor="#f5f5f5">
    <!-- 欢迎语放在这里 -->
  </@emailSection>
</table>

以后产品要改内边距、背景色或者字体大小，你只需要修改宏的默认值，或者调用时传不同参数就行，不用逐个修改td的style。

4. 用Outlook专属条件样式解决特殊兼容问题 #

有些样式Outlook完全不支持（比如border-radius、box-shadow），这时候可以用条件注释给Outlook单独写“降级”样式，给现代客户端保留正常样式：

<style>
  /* 给现代客户端的样式 */
  .header-box { border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
</style>
<!--[if mso]>
<style>
  /* 给Outlook的降级样式 */
  .header-box { border:1px solid #eee; }
</style>
<![endif]-->

然后在表格上加上对应的class即可。

总的来说，邮件模板适配的核心就是：表格布局兜底+行内样式优先+Outlook条件注释适配+Freemarker宏复用，既能解决跨客户端样式不一致的问题，又能大幅降低后续需求变更的修改成本。

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