需同时设置 list-style: none、padding-left: 0 和 ::marker { content: "" } 才能彻底清除默认箭头并修正缩进；旧版 Safari 需用 ::before 替代 ::marker；切勿修改 summary 的 display 或 float，否则破坏可访问性与交互。
能去掉，但不能只靠 list-style: none 一行就完事——漏掉 padding-left 或 ::marker，文字会左移、箭头可能残留、Safari 下还容易错位。
为什么 list-style: none 是第一步，但不是全部
浏览器把 summary 当作 display: list-item 渲染，原生箭头本质是 UA 样式里的 marker。设 list-style: none 确实能干掉 Firefox/Chrome 的默认三角，但它不碰 padding：Chrome 会继续保留 padding-inline-start（约 24px），导致文字缩进异常；Safari 则可能把文字和残留空白挤在一起。
必须同步处理：
-
summary { list-style: none; padding-left: 0; }—— 清 marker + 拉直文字位置 - 加
summary::marker { content: ""; }显式清空，对 Chrome 115+/Firefox 117+ 更稳 - 若需兼容 Safari 15.4 之前版本（如 iOS 16 以下），
::marker无效，得换::before方案
summary::before 替代方案：兼容性最强的自定义入口
当项目要跑在旧版 Safari 或需要精确控制图标位置/颜色/动画时，::before 是目前最可靠的 fallback。它不依赖 ::marker 支持度，且可自由定位。
立即学习“前端免费学习笔记（深入）”；
典型写法：
summary {
list-style: none;
position: relative;
padding-left: 24px; /* 为图标预留空间 */
}
summary::before {
content: "▶";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s;
}
details[open] summary::before {
content: "▼";
transform: translateY(-50%) rotate(90deg);
}注意点：
- 别用
margin-left推图标——动画会触发重排，卡顿明显 -
top: 50%; transform: translateY(-50%)垂直居中比line-height更稳，尤其文字行高变化时 - 图标用 Unicode 字符足够轻量；若需 SVG，建议用
background-image配合width/height控制尺寸
千万别碰的两个属性：display 和 float
给 summary 设 display: block 或 float: left 是高频翻车操作，后果直接且隐蔽：
- 键盘用户按
Space或Enter失效——summary不再被识别为可切换按钮 - 屏幕阅读器读不出 “click to toggle”，语义断裂
- Safari 在非首个子元素场景下可能完全忽略点击区域
- 移动端手指点击热区变窄，误触率上升
真要对齐或布局？用外层 <div> 包一层，设 display: flex 或 grid，别动 summary 自身的 display。
details[open] 状态下箭头旋转动画的边界条件
想让箭头转得顺滑，只靠 transition: transform 就够了。但有三个硬约束必须满足：
- 动画只能作用在
::before或::after上，::marker不支持transform动画（Safari 17.5 仍不支持） - 不能用
height、margin、width做显隐或位移——这些会触发布局重排，帧率暴跌 -
details[open] summary::before必须和基础summary::before的content类型一致（都用字符、都用 SVG data URL），否则 Safari 可能闪退或跳帧
复杂点在于：不同浏览器对 details 的 toggle 事件触发时机有细微差异，动画帧如果和 JS 手动控制 open 属性冲突，会出现“转一半停住”的现象。稳妥做法是动画只响应 CSS 状态，别混用 JS 强制 setAttribute。
