邮件客户端不认css标签因多数（如outlook、gmail）剥离及，gmail禁用外部/嵌入式css，outlook用word引擎不支持选择器优先级，故须内联样式；仅color、font-family等基础属性全平台稳定，display:flex等应避免；推荐juice工具自动内联，outlook兼容需表格布局+vml。
为什么邮件客户端不认和
因为绝大多数邮件客户端（如 Outlook、Apple Mail、Gmail Web/App）会剥离或忽略 中的 <style></style> 标签，甚至直接丢弃整个 。Gmail 从 2016 年起就禁用了外部样式表和大部分嵌入式 CSS（仅保留部分 !important 内联支持，且不稳定）。Outlook 桌面版用的是 MS Word 渲染引擎，根本不支持 CSS 选择器优先级。
所以不是“写得不对”，而是根本没机会执行——必须把样式塞进每个元素的 style 属性里。
哪些 CSS 属性在邮件中基本可用
不是所有 CSS 都能内联生效。邮件客户端只认一小部分属性，且支持程度差异极大。安全清单如下：
-
color、font-family、font-size、line-height、text-align—— 全平台稳定 -
padding（但padding-top在旧版 Outlook 中可能被忽略，建议用padding简写） -
background-color（background-image基本不可靠，Gmail 完全不支持） -
border（仅支持border: 1px solid #000这类简写；避免border-top单独设置） -
width和height（推荐用固定值，百分比在 Outlook 中表现异常）
以下属性尽量别碰：display: flex、float、position、margin（Outlook 把它当 0 处理）、max-width（Gmail 不识别）。
立即学习“前端免费学习笔记（深入）”；
如何把 CSS 自动转成内联 style（实操工具链）
手写内联样式效率低、易出错、难维护。主流做法是先写语义化 HTML + 外部 CSS，再用工具自动内联。关键点在于选对工具和配置：
- 用
juice（Node.js）最稳妥：它不依赖 DOM，纯字符串处理，兼容老式 HTML 结构；运行命令为npx juice --web-resource-dir ./assets input.html > output.html - 避免用
inline-css类库——它依赖 JSDOM，在含 malformed HTML（比如未闭合标签）时容易崩溃 - 如果模板含 Handlebars 或 Liquid 变量（如
{{name}}），确保工具支持保留这些占位符；juice默认保留，但需关掉applyStyleTags: false和removeStyleTags: false - 内联前务必移除
@media查询——它们在邮件里完全无效，还可能干扰内联逻辑
示例片段转换前：
<p class="headline">Hello</p>
<style>.headline { font-size: 24px; color: #333; }</style>
转换后应为：
<p style="font-size: 24px; color: #333;">Hello</p>
Outlook 表格布局 + VML 背景的硬核兼容方案
当需要圆角按钮、背景图、响应式栅格时，纯 CSS 内联已经不够。这时得退回到表格布局，并为 Outlook 特别加 VML（Vector Markup Language）代码——这是微软唯一认可的“伪 CSS”渲染方式。
- 所有结构用
<table> 套嵌，<code>cellpadding="0"、cellspacing="0"、border="0"必写 - 按钮背景色用
<td bgcolor="#007bff">，比 <code>style="background-color"兼容性更好 - 要背景图？在
<td> 里嵌一段 VML <code><rect></rect>，并用<!--[if mso]><![endif]-->条件注释包裹，否则其他客户端会显示乱码 - 字体堆栈必须写全：
font-family: "Segoe UI", Helvetica, Arial, sans-serif；Outlook 会跳过引号缺失的字体名（如Segoe UI不加引号就失效）
这层复杂度没法靠工具自动生成，必须人工校验 Outlook 桌面版实际渲染效果——截图比任何文档都准。
