最稳妥方案是用<strong>包裹summary文字，语义正确、无障碍友好、兼容性好；CSS font-weight可选但需注意display影响和旧版Safari延迟；禁用<b>。
summary文字加粗该用还是CSS font-weight？
直接用<strong>包裹文字最稳妥，语义正确、无障碍友好、兼容性无死角。用font-weight: bold也可以，但得小心两点：一是<summary>默认是内联元素，如果父容器或自身有display: block之类改动，可能意外影响点击区域；二是某些旧版 Safari 对内联元素上设font-weight响应略慢，视觉有轻微延迟。
不推荐用<b>——它纯样式无语义，对屏幕阅读器不传达重要性，也不符合现代 HTML 实践。
实际建议：
- 语义重要时（如“警告”“必读说明”），套
<strong>，比如<summary><strong>安全设置</strong></summary> - 仅需视觉加粗且上下文已明确语义时，用 CSS：
summary { font-weight: 600; }（比bold更可控） - 避免在
<summary>里混用<strong>和font-weight，容易因层叠顺序导致意外加粗倍数
summary文字居中或右对齐为什么点不动？
因为text-align: center或text-align: right本身不破坏交互，但开发者常顺手加上display: block或width: 100%来“配合居中”，这就踩坑了——<summary>一旦变成块级，原生箭头图标（::marker）会错位甚至消失，Chrome/Firefox 中点击区域也可能收缩到文字宽度内，导致空白处点不展开。
立即学习“前端免费学习笔记（深入）”；
真正安全的居中做法只有两种：
- 保持
display: inline（默认值），用text-align作用于父<details>，并确保父容器有明确宽度和text-align: center - 改用
display: inline-flex+justify-content: center，同时重置margin: 0和min-height: auto - 绝对不要给
<summary>设float、position: absolute或display: grid，这些会彻底切断原生 toggle 行为
summary里放图标+文字，怎么对齐不跳动？
原生箭头是::marker伪元素，位置固定在文字左侧，不可选、不占布局空间。一旦你用<span>⚙️</span>或background-image额外加图标，就容易和原生箭头打架：展开/收起时图标位置微移、文字行高突变、甚至 Safari 下图标被裁切。
稳定方案只有一条路：禁用原生::marker，统一用伪元素控制。
- 先清空原生图标：
summary::marker { content: ""; } - 再用
summary::before插入自定义图标：content: "▶";或content: url(arrow.svg); - 关键补丁：
summary[open]::before { content: "▼"; }，显式定义展开态 - 必须加
vertical-align: middle或line-height: 1.2，否则图标和文字基线不齐，尤其在小字号下明显跳动
表格单元格里用details，summary文字垂直居中总偏上？
<td>默认vertical-align: middle，但<summary>是内联元素，其基线（baseline）落在文字底部，不是盒子中心，所以看起来“偏上”。这不是 bug，是 CSS 行内格式化上下文的正常表现。
解法很简单，但容易忽略细节：
- 给
<summary>加display: inline-flex+align-items: center，比inline-block更稳 - 务必清除
<summary>的margin（浏览器 UA 样式带margin-bottom: 1em），否则即使 flex 也压不住外边距 - 如果
<td>设置了line-height，要同步调整<summary>的line-height，否则多行折叠后高度计算错乱 - 别用
padding-top/padding-bottom硬调——这会让点击热区变窄，触控体验差
最易被忽略的一点：表格列宽未固定时，<summary>内容换行会导致高度动态变化，align-items: center会随之偏移。这时候table-layout: fixed + 显式<col width="200">才是根治办法。
