Gmail无法渲染邮件模板内嵌CSS问题求助

关键事实 #

Gmail对<style>标签的内嵌CSS不是完全不支持，但有严格限制，这就是你遇到“部分模板生效、部分失效”的核心原因。

Gmail内嵌CSS的具体规则 #

• 选择器支持有限：仅稳定支持标签选择器（如p、div）和ID选择器，类选择器（.xxx）在新版Gmail中经常被过滤。你之前的模板能生效，大概率是用了标签/ID选择器，或者刚好触发了兼容特例。
• 媒体查询有条件支持：只有移动端定向的媒体查询（比如@media only screen and (max-width: 600px)）能被识别，且必须放在<style>标签最顶部，不能嵌套复杂逻辑。
• 属性屏蔽：position、float、z-index这类布局属性，即便写在<style>里也会被忽略，只能用内联样式。

不用手动内联的解决思路 #

如果你不想每次都手动处理内联，试试这些方法：

• 替换选择器：把模板里的类选择器换成标签选择器（比如.title改h1）或ID选择器（#title），能大幅提升内嵌CSS的生效概率。
• 后端自动内联：在后端集成轻量的CSS内联工具（比如Python用premailer，Node.js用juice），发送邮件前自动完成内联，完全不用手动操作。
• 混合写法：对必须用类选择器的部分保留内嵌CSS，对容易失效的布局属性直接写内联样式，兼顾便捷性和兼容性。

额外提醒 #

Gmail的邮件渲染逻辑和普通浏览器天差地别，它会过滤大量不符合其规则的CSS代码。如果你的模板需要兼容多邮箱客户端，内联样式仍是最稳妥的方案——只是可以通过后端自动化来消除手动操作的麻烦。

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