details标签在大字号模式下存在兼容性问题：Windows/macOS系统缩放导致summary热区压缩或偏移，Safari丢失toggle事件需轮询检测，屏幕阅读器需手动同步aria-expanded，Android微信WebView直接忽略标签需降级为div+button结构。
details标签在Windows/macOS大字号模式下点击失效
系统级大字号（如Windows“放大文本”设为175%，macOS“显示缩放”选“更大文字”）会改变summary的点击热区计算逻辑，导致部分浏览器（尤其是Edge 115–119、Safari 16.6）点不中——不是样式错位，是原生触发区域被压缩或偏移。
根本原因在于：浏览器将summary的可点击高度硬编码为固定像素值（如24px），而系统缩放后字体行高拉伸，但热区未同步拉伸。用户实际点击文字区域，却落在热区之外。
- 验证方式：用DevTools选中
summary，看:hover伪类是否能稳定触发；若hover只在文字顶部/底部几像素生效，基本就是热区压缩 - 强制修复：给
summary显式设min-height: 1.8em（不能用px，必须用相对单位），并配合line-height: 1.4 - 禁用
vertical-align: middle等对齐属性，它会让热区在缩放后上下偏移 - 不要用
transform: scale()放大summary，这会进一步扰乱热区坐标映射
Safari + macOS大字号下toggle事件丢失
macOS Ventura/Monterey开启“更大文字”后，Safari 16+会跳过toggle事件派发——open属性能手动读写，但监听不到状态变化，键盘（空格/回车）也无法触发。
这不是bug，是WebKit对高DPI场景下事件冒泡路径的保守处理。它把summary的交互降级为纯视觉反馈，不走标准事件流。
立即学习“前端免费学习笔记（深入）”；
- 必须用轮询替代事件监听：
setInterval(() => { if (el.open !== lastOpen) { handleToggle(); lastOpen = el.open; } }, 100) - 避免依赖
event.target判断来源，改用el.open直接读取状态 - 键盘支持要手动补全：给
summary加tabindex="0"，再监听keydown，对Enter和Space调用el.toggleAttribute('open') - 注意：轮询会导致CPU小幅上升，建议只对可见区域内的
details启用
屏幕阅读器在大字号模式下读不出展开状态
NVDA、VoiceOver在系统大字号开启时，常忽略details[open]的语义变化，仍播报“已折叠”，即使内容已显示。这是因为辅助技术依赖CSS display或visibility推断状态，而details靠的是原生属性，未主动同步aria-expanded。
- 必须手动同步：
el.setAttribute('aria-expanded', el.open)，并在toggle或轮询回调里更新 -
summary需保留role="button"，否则VoiceOver可能读作“段落”而非“可点击项” - 不要用
aria-hidden="true"隐藏原生箭头图标，应改用aria-hidden="true"包裹自定义::before图标，确保文字标题仍可读 - 测试要点：开启系统大字号 + 屏幕阅读器，用Tab聚焦
summary，听是否播报“已展开，按钮”
Android WebView（微信/QQ内置）大字号渲染异常
安卓端微信v8.0.5x、QQ v8.9.9以下版本，在系统设置“字体大小”调至“超大”时，details标签会被X5内核直接忽略——整个summary不渲染，内容始终显示，且无任何报错。
这是X5内核对HTML5语义标签的深度阉割，非样式问题，无法通过CSS修复。
- 检测手段：用
document.createElement('details').toString() === '[object HTMLUnknownElement]'判断是否被识别 - 降级方案：检测失败后，用
div+button重绘结构，并手动绑定click和keydown - 关键补全：
button必须带aria-expanded和aria-controls，目标内容容器加id与之对应 - 避免在降级结构中使用
details相关CSS类名（如.details-open），防止样式污染
真正麻烦的是：大字号模式下，同一份代码在Chrome桌面、Edge桌面、Safari桌面、iOS Safari、安卓微信的表现可能完全不同——有的点不中，有的没事件，有的读不出状态，有的直接不渲染。没有银弹，只能分端检测、分端兜底。最易被忽略的是轮询机制和aria-expanded的手动同步，这两处一漏，残障用户就完全无法使用。
