Gmail为实现CSS沙箱隔离，会在HTML邮件中所有id属性前添加随机哈希前缀（如m_-2166845457075511738message_2401_...），但仅对id生效，不对href中的锚点值重写，导致与无法匹配——这是Gmail渲染机制固有缺陷，非代码错误。
gmail为实现css沙箱隔离，会在html邮件中所有`id`属性前添加随机哈希前缀（如`m_-2166845457075511738message_2401_...`），但**仅对`id`生效，不对`href`中的锚点值重写**，导致``与``无法匹配——这是gmail渲染机制固有缺陷，非代码错误。
在构建支持跳转的HTML邮件（如目录导航、章节锚点）时，开发者常依赖标准HTML语义：通过 指向 实现页面内跳转。然而，当邮件在Gmail Web客户端中渲染时，这一机制会失效——原因并非发送端问题，而是Gmail服务端主动执行的DOM标准化改写。
? 问题本质：Gmail的“单页多邮件”沙箱策略
Gmail将所有邮件（含侧边栏、广告、聊天窗）统一渲染于同一DOM树下，而非使用iframe隔离。为防止不同邮件间CSS选择器冲突（例如一封邮件定义的 #header { color: red; } 意外覆盖另一封邮件的标题），Gmail在解析入站HTML时强制执行以下转换：
- ✅ id="message_2401_xxx" → 重写为 id="m_-2166845457075511738message_2401_xxx"
- ✅ class="toc-item" → 重写为 class="m_-2166845457075511738toc-item"
- ❌ href="#message_2401_xxx" → 保持原样，不重写为 href="#m_-...message_2401_xxx"
该行为已被大量实测验证：通过Gmail「显示原始邮件」可确认原始HTML无异常；而「检查元素」看到的带前缀ID与未更新的href，正是跳转断裂的根源。
✅ 可靠解决方案（按推荐优先级排序）
方案1：弃用锚点跳转，改用纯CSS控制的平滑滚动（兼容现代客户端）
Gmail虽不重写href，但支持内联style中的scroll-behavior: smooth（需配合或
设置）。更关键的是：Gmail允许标签且不重写其name属性——这是被长期忽视的兼容性“后门”。立即学习“前端免费学习笔记（深入）”；
<!-- 目录项（href指向name，非id） -->
<ul style="list-style:none; padding:0; margin:10px 0;">
<li><a href="#toc_section_2401">A display test</a></li>
<li><a href="#toc_section_2383">Testing individual</a></li>
</ul>
<!-- 目标位置（使用name而非id） -->
<table class="message" ...>
<tr>
<td>
<a name="toc_section_2401"></a> <!-- Gmail不修改name属性 -->
<strong>A display test</strong><br/>
<a href="#pagetop">Top</a>
</td>
</tr>
</table>✅ 优势：零JS依赖、100%兼容Gmail/Outlook/iOS Mail；name属性不受任何前缀干扰。
⚠️ 注意：是HTML4遗留语法，但所有主流邮件客户端（含Gmail）均完整支持，且比id更稳定。
方案2：服务端动态同步重写href（适用于必须用id的场景）
若业务强依赖id（如需配合JavaScript动态操作），可在Thymeleaf模板中预生成匹配的href前缀。利用Gmail前缀在同一封邮件内全局一致的特点：
<!-- Thymeleaf模板中，假设已注入变量 'gmailPrefix' -->
<ul th:with="prefix=${gmailPrefix}">
<li><a th:href="|##{prefix}message_2401_${uuid}|">A display test</a></li>
</ul>
<!-- 对应目标 -->
<a th:id="${prefix} + 'message_2401_' + ${uuid}"></a>✅ 优势：完全保留id语义，逻辑清晰。
⚠️ 注意：需在Java层生成唯一前缀（如"m_" + Long.toHexString(System.nanoTime())），并确保同一封邮件中所有ID/URL使用相同值。
方案3：绝对URL + 页面锚点（需托管静态页）
将邮件内容托管为Web页面，用真实URL替代锚点：
<a href="https://yourdomain.com/digest-20260508.html#message_2401_xxx"> A display test </a>
✅ 优势：彻底绕过Gmail DOM改写。
⚠️ 注意：需额外部署静态页、维护URL生命周期，且移动端体验可能降级。
? 不推荐的“伪解法”
- 正则匹配href$="xxx"：Selenium测试可用，但无法修复用户端跳转失败。
-
标签：Gmail会过滤或忽略，无效。 - JavaScript跳转：Gmail完全禁用邮件内脚本，onclick等事件被剥离。
总结：以客户端兼容性为设计前提
HTML邮件开发的核心原则是放弃浏览器级语义，拥抱邮件客户端事实标准。Gmail的ID前缀机制不是Bug，而是其架构必然产物。最佳实践是：
- 优先使用替代id实现锚点；
- 避免依赖CSS选择器定位ID（测试时改用[name$="xxx"]或[id*="xxx"]）；
- 所有样式必须内联，禁用
- 发送前用Email on Acid或MailingCheck验证多客户端渲染。
遵循上述方案，即可在Gmail中稳定实现目录跳转，无需等待谷歌更改其沙箱策略。
