最稳做法是保持summary默认inline显示，用padding微调垂直居中并用::before插入图标；需重置margin为0、避免flex/text-align破坏热区；子级箭头须手动限定作用域；Safari旧版需降级兼容。
summary文字和图标怎么对齐不跳动
默认summary是内联元素，自带浏览器 UA 样式里的小三角，但这个三角不占布局空间、不响应vertical-align，硬调容易错位或消失。常见现象是加了或后文字上浮、图标下沉、点击热区偏移。
最稳的做法是保持summary的默认display: inline，只用padding微调垂直居中，再通过::before插入图标：
- 给
summary设padding: 8px 12px（确保触控热区≥44px高） - 用
summary::before { content: "▶"; margin-right: 6px; }补图标，避免干扰原生语义 - 展开时切换：
details[open] summary::before { content: "▼"; } - 别给
summary设display: flex或text-align: center——会破坏原生点击区域计算
details横向排列时summary间距不均
summary在 Chrome/Firefox 中默认带margin-bottom: 1em，横向菜单里这行距会把下一项往下顶，造成视觉错位。这不是 bug，是 UA 样式行为。
必须重置，且不能只清margin-bottom：
- 统一写
summary { margin: 0; }，最安全 - 如果父容器用了
display: flex，还要确认没漏掉align-items: center，否则子项基线对齐可能出偏差 - 避免用
line-height“撑高”summary——它不影响折叠逻辑，但会让触控热区虚高，尤其在移动端 - 若需等宽排列，建议给每个
details设flex: 1或固定min-width，而不是靠text-align挤
嵌套菜单里子summary箭头方向混乱
二级details里的summary，原生三角默认还是右向，不会随父级展开状态自动翻转；同时缩进也容易错乱，点一级菜单时两级一起收起。
根本原因是::marker伪元素无法跨层级继承样式，必须手动限定作用域：
- 子级箭头重写：
details details summary::marker { content: "▸"; } - 展开时变向下：
details details[open] summary::marker { content: "▼"; } - 缩进用
padding-left控制（比如24px），别用text-indent——对summary无效，还影响屏幕阅读器 - 状态选择器必须加层级：
details > details[open]，否则样式会污染到所有后代
Safari里summary点击区域太小或图标不显示
iOS Safari 15.4 之前版本对summary热区识别极窄，且旧版 Safari 基本不支持::marker，导致自定义图标失效、点不中、甚至整个折叠功能静默失灵。
降级方案要兼顾可访问性和触控反馈：
- 强制热区：
summary { min-height: 44px; padding: 0 12px; cursor: pointer; } - 图标兼容写法：先
summary { list-style: none; }，再用summary::before+ 内联 SVG（比字体图标更稳） - 必要时加
role="button" tabindex="0"，确保键盘用户能用空格/回车触发 - 别用
font-size: 0隐藏原生 marker——Safari 旧版会直接让summary失去交互能力
真正麻烦的是结构错误不会报错，但功能彻底消失；而 Safari 对::marker的支持断层至今没完全填平，得靠@supports分条件写样式，或者干脆放弃三角改用纯文本状态提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
