默认箭头需通过 details > summary::marker { content: ""; } 清除，因 list-style: none 单独无效；保持 display: list-item 以维持可访问性，旧浏览器需降级兼容。
details > summary 默认的箭头怎么去掉
浏览器给 <summary> 自带一个 ::marker 伪元素（通常是 ▶ 或 ▼），它本质是 list-item 显示模式附带的符号。直接设 list-style: none 不生效，因为 <summary> 不是 <li>，它的标记由 ::marker 控制。
正确做法是清除这个伪元素：
-
details > summary { list-style: none; }—— 这步必要但不够 -
details > summary::marker { content: ""; }—— 关键：清空内容，彻底隐藏箭头 - 注意 Firefox 需要
layout.css.marker.enabled开启（默认开启），旧版 Edge 不支持::marker，得降级用background-image模拟
为什么 display: block 后箭头消失了但布局错乱
因为 <summary> 默认是 display: list-item，自带 marker 和基础行内行为。一旦写成 display: block，::marker 就失效了——箭头没了，但你也丢掉了原生语义和可访问性支持。
想保留箭头又自定义样式，应该：
立即学习“前端免费学习笔记（深入）”；
- 保持
display: list-item（不要覆盖） - 用
list-style-type: none清除默认符号类型 - 再用
::marker { content: "▸ "; color: #666; }手动补一个可控图标 - 如果父容器是
flex，加align-self: flex-start防止拉伸或换行
移动端点击区域太小，怎么扩大又不破坏 marker
原生 <summary> 只有文字区域响应点击，触摸设备上极易误触失败。不能靠 padding + display: block 粗暴处理，否则 marker 会消失或偏移。
安全扩热区的方式是：
details > summary { display: list-item; padding: 8px 12px; }- 确保没写
user-select: none（某些 CSS 重置会加，导致长按复制而非触发展开） - 避免在
<summary>上设pointer-events: none，这会让整个点击失效 - 如需视觉上“无边框”，用
border: none; background: transparent;，别动 display
SSR 页面中 open 属性被 JS 覆盖后 marker 闪一下
服务端渲染出 <details open>，客户端 hydration 前浏览器已渲染展开态；JS 加载后若立刻执行 el.open = false，会强制收起，此时 ::marker 从 ▼ 切回 ▶，造成视觉闪动。
规避方法很实际：
- 服务端不预设
open，改用 JS 在DOMContentLoaded后统一控制，状态更可控 - 若必须 SSR 展开，JS 初始化时先读取
el.hasAttribute('open')，而不是直接赋值el.open - 所有样式（包括
::marker）提前内联或早于 JS 加载，减少重绘时机差
真正容易被忽略的是：::marker 的兼容性断层比想象中深——Safari 15.4+、Firefox 49+、Chrome 12+ 支持，但旧 Edge 和部分安卓 WebView 完全不识别。线上项目若需兜底，建议把 ::marker 当作增强，核心交互仍靠文字可点、键盘 Space/Enter 触发，别让它成为功能单点依赖。
