必须用内联CSS，因为Gmail、Outlook（Windows版）、Apple Mail等主流客户端会主动剥离<style>和<link>标签并过滤class/id，仅属性可生效；需配合table布局、显式vertical-align、字体兜底，并经真实客户端测试。
必须把所有 CSS 写进 style 属性里，<style> 和 <link> 在 Gmail、Outlook（Windows 桌面版）、Apple Mail 里会被直接剥离或忽略——不是不支持，是主动删。
为什么内联是唯一可靠路径
邮件客户端不是浏览器，它们用的是类似 HTML 4 的渲染引擎，且有安全策略：Gmail 会清空整个 <head>，Outlook 过滤 class/id，Apple Mail 对 !important 有特殊解析逻辑。最终能活下来的，只有 style="..." 里的声明。
-
<p style="font-family: Arial, sans-serif; color: #333 !important;">✅ 能跨平台生效 -
<p class="text">+<style>.text { ... }</style>❌<style>被删，class 失效 -
background-image在 Outlook 中完全不支持，border-radius在多数客户端无效
juice.inlineContent() 的三个实操陷阱
用 juice 自动内联很常见，但默认配置在邮件场景下容易出错：
- 它不处理
@media查询——响应式规则必须提前拆成两套 CSS（桌面/移动端），再分别传入juice.inlineContent() - 它保留
!important，但 Outlook 2016/2019 只认带!important的关键样式，建议所有字体、颜色、间距都手动加 - 它不会自动读取
<link href="email.css">，必须自己用fs.readFileSync('email.css', 'utf8')加载内容，再传进去
table 布局和 vertical-align 是硬性要求
现代 CSS 布局（flex、grid）在绝大多数邮件客户端中直接失效，float 和 position 行为不可控。唯一稳定的方式是用 <table> 控制结构，并显式声明 vertical-align：
立即学习“前端免费学习笔记（深入）”；
-
<td valign="top">比style="vertical-align: top;"在 Outlook 中更可靠 - 每张表都要设
cellspacing="0" cellpadding="0" border="0"，否则 Outlook 会加默认边距 - 字体必须兜底：
font-family: Helvetica, Arial, sans-serif;，不能只写system-ui或Inter
真实客户端测试比本地预览更重要
浏览器里看起来完美，不代表发出去能正常显示。Gmail Web 版、iOS Mail、Outlook for Mac、Outlook for Windows 渲染差异极大，尤其对：
-
width和max-width的解析（Outlook 忽略max-width） -
line-height的继承行为（Gmail 有时会重置） -
img的width/height缺失导致重排（Outlook 强制要求）
真正有效的验证方式，是用 Litmus 或 Email on Acid 发真实邮件到各端，而不是靠开发者工具模拟。那些没被删掉的 style，未必真被应用了。
