details 标签在 HTML 邮件中完全不可用，所有主流客户端均不支持：Outlook 静默丢弃、Gmail 剥离并破坏 DOM、Apple Mail 保留结构但无交互，且 JS 被全面禁用，唯一可靠方案是静态展开内容并用 table 等兼容标签排版。
details 标签在 HTML 邮件模板中**完全不可用**，所有主流邮件客户端都不支持它。
Outlook（Windows 桌面版）直接忽略 details 标签
Outlook 使用 Word 渲染引擎，它根本不识别 details 和 summary。标签会被静默丢弃，内容可能全部塌陷、错位，或仅显示为纯文本段落——没有折叠逻辑，也没有任何交互迹象。即使你写了 <details open><summary>标题</summary><p>内容</p></details>，Word 引擎也只当它是无效垃圾标签，连 fallback 内容都未必保留结构。
Gmail 会剥离 details 并破坏语义
Gmail Web 和 App 版本会在解析时主动移除所有未知或非白名单标签，details 和 summary 不在白名单中。结果不是“不生效”，而是 DOM 被重写：<details> 开始标签消失，<summary> 变成孤立的行内元素，后续内容被错误包裹或断开。更糟的是，Gmail 还会清除所有 <style>，所以你写的 details[open] > summary::before 之类样式根本不会加载。
Apple Mail 和 iOS Mail 表面渲染但无交互
Apple Mail（macOS/iOS）虽能解析 details 标签并保留 DOM 结构，但它**不绑定任何点击事件、不响应 toggle、不处理键盘空格/回车**。用户点不动，Tab 键跳过，屏幕阅读器读不出状态变化。这不是样式问题，是渲染层未启用原生控件逻辑——它把 summary 当作普通文本节点，而非可交互按钮。
立即学习“前端免费学习笔记（深入）”；
别试 polyfill 或降级 JS —— 邮件里 JS 全被禁用
所有主流邮件客户端（包括 Outlook、Gmail、Yahoo、Apple Mail）都会过滤掉 <script> 标签、内联 onclick、onmouseover 等事件属性。你写 el.toggleAttribute('open') 或监听 toggle 事件，代码根本不会执行。试图用 display: none + button + JS 模拟，只会得到一堆不可见内容和报错空白。
- 替代方案只能是静态展开：把“折叠前”和“折叠后”的两套内容都写死，靠排版留白或分隔线视觉区分
- 如果必须强调层级，用
<table>套<tr>+<td>控制缩进，加粗标题 + 灰色细线分隔 - 绝对不要依赖任何 CSS 选择器匹配
details或summary，它们在邮件中不存在
真正能跨客户端稳定工作的，只有 <table>、<tr>、<td>、<font>、<br> 和内联 style 属性。把 details 当作网页功能来用，发到邮箱里就是自欺欺人。
