gmail 对现代 css（如 flexbox）支持有限，导致内联样式失效；本文详解其兼容性限制，并提供可落地的跨客户端 html 邮件布局方案。
在构建营销邮件、邀请函或事务通知等 html 邮件时，开发者常陷入一个典型误区：将网页开发经验直接迁移到邮件场景。正如示例中所示，尽管代码在 Zoho Mail 中渲染正常，但在 Gmail 中却仅显示基础文本样式（如
加粗放大），而关键的 Flex 布局（display: flex; justify-content: space-between; align-items: center;）完全被忽略——这是因为 Gmail 的邮件渲染引擎（基于旧版 webkit 和自定义解析器）主动剥离或忽略绝大多数现代 CSS 属性，尤其是涉及布局模型的声明。
✅ Gmail 的核心限制（必须牢记）
- ❌ 不支持 display: flex / grid 及其所有子属性（justify-content, align-items, gap, flex-wrap 等）；
- ❌ 不支持 position: absolute/fixed、Float（部分客户端已弃用）、CSS 变量、@media 查询（响应式需用 max-width + 表格嵌套模拟）；
- ✅ 仅可靠支持：内联 style 中的基础属性，如 font-family, color, background-color, margin, padding, width, height, text-align, border，以及部分 table 相关样式（cellspacing, cellpadding, valign）。
因此，原代码中这一段：
<div class="header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px"> @@##@@ <h1 class="title" style="font-size:24px; font-weight:bold; margin:0">Concert Invitation</h1> </div>在 Gmail 中会被降级为普通块级容器，两个子元素垂直堆叠，完全失去左右对齐效果。
✅ 兼容性替代方案：渐进增强 + 回退策略
方案一：纯 CSS 内联回退（适用于 Gmail 及多数 Web 客户端）
利用 margin: auto 的天然居中行为，配合显式 margin-left: 0 / margin-right: 0 实现伪“左右对齐”：
立即学习“前端免费学习笔记（深入）”；
<div class="header" style="margin-bottom:20px; text-align: center;"> @@##@@ <h1 class="title" style="font-size:24px; font-weight:bold; margin: auto; margin-right: 0; display: inline-block; vertical-align: middle;"> Concert Invitation </h1> </div>⚠️ 注意：vertical-align: middle + display: inline-block 是确保图文基线对齐的关键；text-align: center 作用于父容器，但因子元素设置了 margin-left:0/margin-right:0，实际呈现为左图右标题。
方案二：全兼容表格布局（推荐用于企业级邮件）
当需支持 outlook for windows（其使用 word 渲染引擎，对 CSS 支持更弱）时，应采用语义化
