summary默认箭头清不干净是因为浏览器内核渲染机制不同：Chrome/Safari用::-webkit-details-marker，Firefox 129+才支持::marker，旧版几乎无视，需双写summary::-webkit-details-marker { content: none; }和summary::marker { content: ""; }才能全覆盖。
summary 默认箭头为什么清不干净
浏览器对 summary 的默认箭头不是普通内容，而是由 UA 样式通过 ::marker 或 ::-webkit-details-marker 渲染的伪元素，不同内核处理逻辑不一致：Chrome/Safari 用后者，Firefox 129+ 才支持 summary::marker，旧版 Firefox 则几乎无视。只写一种规则，必然漏掉某个浏览器。
稳妥做法是双写清除：
summary::-webkit-details-marker { content: none; }summary::marker { content: ""; }
别用 display: none 或 visibility: hidden——前者破坏可访问性（屏幕阅读器可能跳过整个 summary），后者仍占布局空间且语义混乱。用 content: none 或空字符串最安全。
用 ::before 还是 ::marker 自定义图标
优先用 summary::marker，前提是目标环境支持（Chrome ≥125、Firefox ≥129、Safari ≥15.4）。它天然居中、随 font-size 缩放、无需手动调位置，且不会干扰焦点或点击热区。
立即学习“前端免费学习笔记（深入）”；
如果需兼容更老版本，退而求其次用 summary::before，但必须注意：
- 加
display: inline-block，否则transform无效 - 设
margin-right（图标在文字前）或margin-left（在文字后），避免和残留 marker 冲突 - 别用
background-image+padding模拟——移动端缩放时易错位，且无法响应字体大小变化
示例（Unicode 箭头）：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
summary::before {
content: "▶";
display: inline-block;
margin-right: 8px;
transition: transform 0.2s ease;
}
details[open] summary::before {
transform: rotate(90deg);
}
details[open] 下的旋转动画不生效
常见原因不是代码写错，而是漏了三个硬性条件：
-
transition必须写在summary::before（或::marker）上，不能写在summary元素本身 - 初始态要显式声明
transform: rotate(0deg)，否则从无状态到有状态不触发过渡 - 展开态选择器必须是
details[open] summary::before，写成summary:hover::before或summary:focus::before都无效——用户用空格键展开时根本不会触发 hover/focus
另外，transition: content 完全无效，CSS 不支持对 content 做过渡；只有 transform、opacity、color 等可动画属性才行。
移动端点不中 summary 怎么办
原生 summary 的点击区域默认只包裹文字内容，手指稍偏就失效。这不是样式问题，是渲染层限制——加 padding 会撑开行高、破坏垂直居中，还可能让箭头和文字错位。
正确解法是提升容器响应能力：
- 给
summary设min-height: 44px（符合 iOS/Android 最小触控尺寸） - 加
display: flex+align-items: center，确保文字始终垂直居中 - 补一句
touch-action: manipulation，消除 Safari 的 300ms 延迟 - 别忘了加
cursor: pointer，这是视觉反馈底线
这些改动不影响键盘操作（Tab → Space 依然有效），也不会破坏 details 的语义和屏幕阅读器支持。
真正麻烦的不是怎么加图标，而是判断什么时候该用 ::marker、什么时候得 fallback 到 ::before；还有那些藏在 min-height 和 touch-action 后面的移动端交互细节，一不留神就让用户点不中——而这类问题，DevTools 很难直接告诉你。