答案是内联CSS为强制要求,因Gmail、Outlook(2007–2019)、Apple Mail等主流客户端会剥离<style>标签并忽略<head>,仅支持style属性中的声明;CssToInlineStyles和juice等工具必须提取合并CSS、剔除@media等不支持规则、一对一注入样式且清除class/id。

因为 Gmail、Outlook(2007–2019)、Apple Mail 等主流客户端会直接剥离 <style> 标签,甚至忽略整个 <head> 区域——不是“样式不生效”,而是压根没加载你的 CSS。
为什么 <link rel="stylesheet"> 和 <style> 在邮件里基本等于摆设
Outlook 桌面版用 Word 渲染引擎,只认 style 属性里的声明;Gmail 主动过滤含 @media 或 display: none 的样式块;iOS Mail 对伪类(如 :hover)和选择器(如 tr:nth-child(odd))完全无视。你写的 .btn { color: #fff; } 发出去后,class="btn" 这个属性本身都可能被 Outlook 静默丢弃,只剩纯文本。
CssToInlineStyles 和 juice 不是可选项,是发件前的硬性步骤
手动给每个 <td>、<p> 补 style 属性不可行——中等模板动辄 200+ 样式声明,漏一条就可能导致某段文字在 Gmail 里变黑、在 Outlook 里缩成一团。工具必须做三件事:
- 提取并合并所有
<style>内容,不能依赖自动解析<link href="email.css"> - 剔除所有不支持的规则:
@media、:before、display: flex、border-radius - 把有效声明一对一注入到对应 DOM 元素的
style属性中,且不能残留任何class或id
例如:<td class="header">Hello</td> 必须变成 <td style="font-size:18px; color:#333; padding:12px;">Hello</td>,否则 Outlook 直接跳过渲染。
立即学习“前端免费学习笔记(深入)”;
哪些 CSS 属性能安全内联,哪些一写就失效
不是所有写进 style 的东西都能活下来:
- 安全可用:
color、font-family、font-size、text-align、background-color、padding(仅对<td>有效)、width/height(建议同时用 HTML 属性 +style双保险) - 基本失效:
margin(Outlook 完全忽略)、background-image(所有主流客户端静默丢弃)、float、position、display: table-cell(仅部分客户端有限支持) - 简写陷阱:
border: 1px solid #ccc在 Outlook 里常丢掉solid或颜色,必须拆成border-top: 1px solid #ccc
字体名带空格时,比如 "Helvetica Neue",必须加引号;漏掉会导致 Outlook 解析失败,回退到默认字体。
内联完还不能直接发:Outlook 和 Gmail 的二次校验点
即使工具跑完、所有样式都塞进 style,真实客户端还会再筛一遍:
- Gmail 会重写带
!important的声明,某些版本直接忽略整条规则 - Outlook 2016 for Windows 要求关键样式(如
color、font-size)必须带!important才生效 - 所有图片必须用绝对 URL,
juice默认转 base64 是雷区,得关掉webResources.images
最易被忽略的是:表格布局中,<table> 自身尽量别写 style,靠 width="600"、cellspacing="0" 这些 HTML 属性控制——Outlook 2013 会直接忽略 <table style="width: 600px;">。



















