咨询SendGrid动态邮件CSS样式保留及多客户端渲染最佳实践

核心CSS处理原则 #

• 强制内联关键样式：绝大多数邮件客户端（尤其是Outlook系列）不支持外部CSS或<style>块中的样式，字号、行高、字体这类基础样式必须直接写在HTML元素的style属性里，示例：

  <p style="font-size:16px; line-height:1.6; font-family:Arial, Helvetica, sans-serif;">正文内容</p>
  

• 简化CSS选择器：放弃嵌套类选择器、ID选择器，只使用最基础的元素选择器（如p {}）或直接内联，避免客户端解析时忽略复杂选择器。
• 放弃非兼容CSS属性：不要使用CSS3的圆角、渐变、阴影等高级属性，优先保证基础排版样式的兼容性。

SendGrid平台特定设置 #

• 开启自动内联CSS功能：在SendGrid模板编辑器的设置中，启用「Inline CSS」选项，平台会自动将<style>块中的样式转换为内联样式，避免样式丢失。
• 使用兼容性模式编辑：部分SendGrid模板编辑器提供「兼容性模式」，开启后会自动调整代码，移除邮件客户端不支持的CSS属性和标签。
• 动态变量的样式隔离：所有动态变量（如{{user_name}}）必须包裹在带有固定样式的HTML元素中，示例：

  <span style="font-weight:bold; font-size:18px;">{{user_name}}</span>
  

  禁止直接让变量裸露或通过变量输出CSS代码（如style="{{dynamic_style}}"），这类写法会被多数客户端过滤。

跨邮件客户端兼容技巧 #

• 采用表格布局：邮件客户端对<div>布局的支持不稳定，必须用<table>、<tr>、<td>构建整个邮件结构，将样式写在<td>的style属性中，示例：

  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td style="font-size:16px; line-height:1.6; padding:10px;">内容区域</td>
    </tr>
  </table>
  

• 设置字体降级方案：自定义字体后必须添加系统默认字体作为备选，避免自定义字体加载失败后样式混乱，示例：

  font-family: 'YourCustomFont', Arial, sans-serif;
  

• 测试主流客户端：使用SendGrid的邮件测试功能，或手动测试Gmail、Outlook、Apple Mail、QQ邮箱等主流客户端，不同客户端的CSS支持差异极大，必须针对性调整。
• 避免使用!important：多数邮件客户端会忽略!important规则，通过内联样式直接覆盖默认样式即可，不要依赖该属性。

动态模板额外注意事项 #

• 预渲染验证：在SendGrid模板预览中填充真实动态数据，确认变量替换后样式未被破坏，尤其是包含换行、特殊字符的动态内容。
• 固定模板结构：不要让动态内容改变邮件的HTML结构，比如不要通过变量输出<p>或<div>标签，防止破坏整体样式布局。

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