使用SendGrid SMTP发送邮件时部分内联CSS样式丢失问题排查

可能的原因 #

• 邮件客户端CSS支持受限：不同邮件客户端（如Outlook、Gmail）对现代CSS属性的支持差异极大，像grid-template-rows、columns这类Grid布局属性，很多主流客户端原生就不支持，SendGrid或客户端会自动移除这些无效属性。
• SendGrid的样式过滤机制：SendGrid的邮件处理引擎会自动清理它判定为不兼容邮件环境的CSS属性，尤其是现代布局属性，防止邮件在客户端显示错乱。
• 内联样式转换失败：如果你的CSS最初写在<style>标签而非直接内联，SendGrid的内联转换工具可能无法识别部分属性，导致转换时丢失这些样式。
• z-index属性的特殊性：邮件客户端对z-index的支持非常有限，绝大多数场景下这个属性不会生效，SendGrid会直接移除这类无效属性。

解决办法 #

• 改用表格布局替代Grid：邮件开发的行业标准是用<table>标签实现布局，几乎所有邮件客户端都兼容表格布局，完全避免Grid属性不支持的问题。
• 调整SendGrid设置：进入SendGrid的邮件配置页面，检查是否开启了「CSS内联」或「样式优化」选项，尝试关闭自动清理功能（注意：可能会导致部分客户端显示异常，需要测试）。
• 优先使用兼容属性：先查询主流邮件客户端的CSS兼容性，只选用被广泛支持的属性，避免使用现代CSS特性。
• 替换z-index实现层级：如果需要层级效果，通过调整HTML元素的渲染顺序（后写的元素会覆盖前面的）或使用背景图来实现，不要依赖z-index。

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