默认三角形删不干净因各浏览器内核使用不同伪元素：chrome/safari用::-webkit-details-marker，firefox用::marker（旧版不支持），edge渲染异常；需双写summary::-webkit-details-marker{display:none}和summary::marker{content:""}并重置list-style、padding等才彻底清除。
summary 默认三角形为什么删不干净
因为浏览器用的是 UA 样式（用户代理 CSS），不是 HTML 标准的一部分，各内核实现方式不同：Chrome/Safari 用 ::-webkit-details-marker，Firefox 用 ::marker，但旧版 Firefox 还不支持 ::marker，Edge 有时干脆不渲染。只写一种伪元素，必然漏掉至少一个浏览器。
必须双写清除才真正生效
现代浏览器（Chrome ≥90、Firefox ≥91、Safari ≥15.4）需要同时覆盖两种机制：
-
summary::-webkit-details-marker { display: none; }—— 覆盖 WebKit/Blink 内核 -
summary::marker { content: ""; }—— 覆盖标准路径，Firefox 主流版本已支持 - 额外加
list-style: none;和padding-left: 0;防止残留空白或文字偏移
想换图标？别动 ::marker，用 ::before
::marker 只能控制“有无”，不能设背景图、旋转或过渡；真正可定制的入口是 summary::before：
-
summary::before设为display: inline-block;+vertical-align: middle;对齐文字 - 用
transform: rotate(0deg)/rotate(90deg)做箭头方向切换 - 配合
details[open] summary::before { transform: rotate(90deg); }实现开闭动画 - 避免用
content: "▶"这类字符——字体渲染不一致，移动端易模糊
移动端点击区域小、iOS 有延迟？这三点要补
原生 <summary></summary> 在移动设备上常被点不中或响应慢，尤其 iOS Safari：
- 给
summary加min-height: 44px;（符合苹果推荐触控尺寸） - 用
display: flex; align-items: center;替代纯行高控制垂直居中 - 加
-webkit-tap-highlight-color: transparent;消除点击高亮延迟 - 注意：不要对
summary设pointer-events: none;，否则 toggle 事件彻底失效
最易忽略的一点：即使清除了所有箭头样式，summary 仍可能因继承了父级 list-style 或 margin-left 导致视觉错位——建议重置时从 details, summary { all: unset; } 开始，再逐项加回必要样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
