summary点击区域“点不中”是因浏览器对热区有隐式限制：默认仅响应文字及少量内边距，padding超8px或嵌套inline元素会收缩热区；需设display: block、padding≥12px、line-height: 1.4、min-height: 44px，并用flex对齐图标文字，禁用vertical-align和margin微调，同时兼顾键盘与读屏可访问性。
summary点击区域为什么总是“点不中”
浏览器对summary的点击热区有隐式限制：默认只响应文字内容及其紧邻的少量内边距，上下padding超出约 8px 就可能失效；若内部嵌套span、图标或用了display: inline-block，热区还会进一步收缩甚至错位。这不是 bug，是各浏览器（尤其 Safari）为保障可访问性而做的保守判断。
用display和padding安全扩大热区
不能靠pointer-events: none或position: relative硬盖，得从布局层重建可点击容器：
-
summary必须设为display: block（不是inline或inline-flex），否则 Safari 会裁剪热区顶部/底部 - 用
padding而非height撑开区域，推荐padding: 12px 16px起手，确保最小触控尺寸 ≥ 44×44px - 加
user-select: none防止长按触发文字选择干扰折叠 - 移动端补一句
touch-action: manipulation，避免 iOS Safari 的 300ms 延迟
图标和文字对齐别碰vertical-align
用vertical-align: middle调图标位置，在不同line-height下极易偏移，导致视觉上“点了但没反应”：
- 改用
display: flex; align-items: center;包裹文字和图标（如summary::before） -
summary自身保持line-height: 1.4，避免行盒高度塌缩压缩热区 - 禁用
margin-top/bottom微调图标——它会把热区切成两段，上半部分点不中
Safari 的热区高度敏感问题
iOS Safari 和 macOS Monterey 早期版本对summary的行高计算极严格，line-height: 1或font-size突变会导致热区只在中间 1–2px 高度生效：
- 显式声明
line-height: 1.4并配合min-height: 44px兜底 - 避免父容器设
font-size: 0再子元素重设，这会让 Safari 彻底丢失热区 - 若用
h5等标题标签做summary，务必重置margin: 0和display: inline-block（不用inline）
真正难调的不是样式，而是热区和语义的平衡——加了display: block后键盘 Tab 还能聚焦，但加了flex又可能让屏幕阅读器读漏文字。每次调整都得同时验证鼠标、触控、键盘、读屏四路反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
