必须双写清除伪元素才能彻底隐藏所有浏览器默认箭头：summary::-webkit-details-marker { content: none; } 覆盖 chrome/safari，summary::marker { content: ""; } 覆盖现代 firefox/edge/新版 safari，并配合 list-style: none 和 padding-inline-start: 0 消除残留缩进。
summary 默认小三角为什么在不同浏览器表现不一致
因为各浏览器用的 UA 样式机制不同：Chrome/Safari 用 ::-webkit-details-marker，Firefox 129+ 才支持 ::marker，旧版 Firefox 基本无视它；Safari 15.4 之前完全不认 ::marker。你只写一种规则，必然漏掉某个浏览器——比如只清 ::marker，Safari 会照常显示原生箭头；只清 ::-webkit-details-marker，Firefox 旧版本就不管用。
怎么彻底隐藏所有浏览器的默认箭头
必须双写清除，不能只靠 list-style: none 或单个伪元素：
-
summary::-webkit-details-marker { content: none; }—— 覆盖 Chrome/Safari -
summary::marker { content: ""; }—— 覆盖现代 Firefox/Edge/新版 Safari -
summary { list-style: none; padding-inline-start: 0; }—— 清除列表样式和残留缩进，避免文字左偏
别用 display: none 或 visibility: hidden，前者破坏屏幕阅读器对展开状态的识别，后者仍占空间且可能干扰点击热区。
自定义图标该用 ::before 还是 ::marker
优先用 ::marker（如果目标环境支持），但实际项目中更常用 ::before，原因很实在：
-
::marker在 Safari 15.4+、Firefox 129+、Chrome 125+ 才稳定生效；iOS 16 之前的 Safari 直接忽略 -
::before兼容性好，且能精确控制位置和动画：summary::before { content: "▶"; display: inline-block; margin-right: 6px; } - 用
::before时必须设display: inline-block，否则transform无效；别用::after，容易和没清干净的原生 marker 叠在一起
展开/收起状态切换动画怎么写才稳
旋转动画必须满足三个条件，缺一不可：
- 在
summary::before上声明transition: transform 0.2s ease - 初始态设
transform: rotate(0deg)，展开态用details[open] summary::before { transform: rotate(90deg); } - 别写
transition: content——它不触发重绘，动画根本不会动
移动端还要注意点击区域：原生 summary 热区只包文字，手指一滑就失效。加 min-height: 44px 和 display: flex; align-items: center 才真正提升可点面积，且不影响键盘操作（空格/回车仍有效）。
最易被忽略的是：所有样式修改都不能碰 display 和 float。设 display: block 表面看着正常，实则会让 Safari 忽略点击、让屏幕阅读器读不出“可切换”语义——这不是视觉问题，是交互和可访问性的硬伤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
