summary文字偏移因display: list-item下基线与::marker对齐受font-size、line-height及字体度量影响；垂直居中应设summary { display: flex; align-items: center; }、summary::marker { margin-inline-end: 0.3em; }和summary { line-height: 1.2; }，禁用vertical-align。
为什么summary在不同font-size下文字位置偏移？
因为summary默认是display: list-item，其内部文本基线（baseline）与伪元素::marker的对齐逻辑受font-size、line-height和字体度量影响。字号变大时，若未显式控制垂直对齐，文字常会“上浮”或与图标错位，尤其在小字号（如0.8em）或大字号（1.4em+）下更明显。
summary垂直居中要改哪几个CSS属性？
不能只靠vertical-align——它对list-item作用有限。真正有效的组合是：
-
summary { display: flex; align-items: center; }：强制将文字与::marker按中心对齐 -
summary::marker { margin-inline-end: 0.3em; }：控制图标与文字间距，避免字号缩放后挤在一起 -
summary { line-height: 1.2; }：固定行高，防止不同字号下高度波动导致视觉跳动 - 慎用
padding-top/padding-bottom：它们会放大字号变化带来的偏差，优先用flex+line-height
移动端小字号下::marker图标被截断怎么办？
某些安卓 WebView 或旧版 Safari 在font-size低于12px时，::marker的渲染区域会被裁剪，即使设置了content: "ⓘ"也可能只显示一半。解决方式：
- 给
summary加min-height: 1.4em，确保容器有足够空间容纳图标 - 用
background-image替代::marker（需配合padding-left预留空间），规避原生伪元素渲染限制 - 对极小字号（如10px），直接写死图标：
<summary><span aria-hidden="true">ⓘ</span>说明</summary>，再用span单独设font-size - 避免在
::marker里用font-family指定非系统字体——多数浏览器不支持
IE或老Edge中details样式完全失效怎么兜底？
@supports not (display: details)已不可靠，实际应检测details是否被识别为块级容器：
- 用
@supports (display: list-item)判断summary是否支持——这是更稳定的降级信号 - 对不支持的环境，用
details:not([open]) summary + *隐藏内容，并加details[open] summary + *强制显示，模拟展开态 - 不要依赖
open属性做JS判断，老浏览器可能解析但不触发toggle事件，改用getAttribute('open') !== null - 字体缩放时，老IE的
line-height计算异常，建议对summary设height: 1.4em而非仅line-height
最易被忽略的是：当父容器用了transform: scale()或zoom，::marker的尺寸不会同步缩放，必须手动重设font-size和margin。这种场景下，用span替代::marker反而更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
