summary样式优化需先用summary::marker{content:""}移除原生箭头，再重置内外边距；通过display:block/inline-flex扩展点击热区；旧浏览器需用@supports检测或改用div+aria；嵌套时防事件冒泡并确保焦点与aria状态正确。
summary 标签默认样式太丑，怎么改？
summary 是 details 的唯一合法子元素，浏览器会给它加一个内置的三角箭头和点击交互，但默认样式（比如粗体、上下边距、焦点轮廓）在多数 UI 里显得突兀。直接写 summary { font-weight: normal; } 不一定生效——因为部分浏览器（如 Chrome）用伪元素 ::marker 控制箭头，且对 summary 有用户代理样式强制重置。
实操建议：
- 先用
summary::marker { content: ""; }移除原生箭头，避免和自定义图标冲突 - 用
summary { list-style: none; padding: 0; margin: 0; }清掉默认内外边距 - 如果要加自定义图标（如 SVG 或 Unicode），推荐放在
summary::before里，并设display: inline-block控制对齐 - 别忘了处理
details[open] summary::before的状态切换，比如旋转箭头或替换图标
点击区域小、响应不灵敏，怎么扩大可点范围？
summary 默认只包裹文字内容，点击空白处（比如行高留白）常不触发展开。这不是 bug，是它被当作内联元素渲染的结果。
实操建议：
- 给
summary设display: block;或display: flex;，再配padding扩展热区 - 避免只靠
line-height增高——它不增加点击区域，只是撑开视觉高度 - 如果父容器有
overflow: hidden，检查是否裁剪了扩展后的summary，必要时加position: relative - 移动端尤其要注意：iOS Safari 对
summary的最小点击尺寸敏感，建议min-height: 44px
details + summary 在旧浏览器里完全不显示，怎么办？
details / summary 在 IE 和 Android 4.4 及更早版本中无支持，连基本渲染都没有，不是样式问题，是标签被忽略。
实操建议：
- 不要依赖 JS 检测
details支持来降级——很多 polyfill（如details-element-polyfill）只补交互，不补语义，且可能破坏无障碍 - 更稳妥的做法：用 CSS
@supports (display: contents)或@supports (display: grid)间接判断现代特性，再加载轻量 JS 补交互 - 若必须兼容 IE，放弃
details，改用div+aria-expanded+ 手动 toggle class，保持语义和键盘导航 - 注意：即使加了 polyfill，
summary的role="button"仍需手动绑定Space/Enter键事件
折叠菜单嵌套时，子 summary 点击会触发父层收起
当多个 details 嵌套，点击内层 summary 时，事件会冒泡到外层，导致意外收起——这是事件传播的自然结果，不是 bug。
实操建议：
- 在子
summary的 click 处理器里加event.stopPropagation()，但仅限你用 JS 控制展开逻辑时 - 纯 HTML/CSS 方案下，避免嵌套
details；改用div包裹子菜单，靠 CSS 控制显隐（例如details[open] .submenu { max-height: 200px; }） - 如果必须嵌套，给外层
details加pointer-events: none在子区域，再用子元素单独设pointer-events: auto - 测试键盘操作：嵌套后
Tab顺序是否混乱，summary是否仍能正确获得焦点
summary 获得焦点时，屏幕阅读器会读出“已折叠”或“已展开”，但如果你移除了 ::marker 又没补充 ARIA 状态，辅助技术就无法感知当前状态。这比样式难调，也更关键。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
