legend必须是fieldset的第一个直接子元素，否则边框裁剪失效；需避免嵌套div、错位放置或伪元素模拟；正确调整用margin-block-start和padding，禁用border-radius与border/outline；替代方案用div+CSS会丢失无障碍支持。
fieldset 的 legend 标签必须直接子元素
fieldset 框线内嵌标题只能靠 <legend> 实现，且它必须是 <fieldset> 的第一个直接子元素，否则浏览器会自动重排或忽略样式。常见错误是把 <legend> 套在 <div> 里、放在中间、或用 CSS 伪元素模拟——这些都不触发原生边框裁剪效果。
-
<legend>位置错（比如第二个子元素）：边框会从顶部断开，标题浮在框外 - 用
display: block强行改<legend>：可能破坏边框与文字的咬合关系，尤其在 Safari 中 - 想居中但只设
text-align: center：仅对齐文字，不移动边框起始点；正确做法是用margin-inline-start或padding调整
legend 文字覆盖边框时的兼容处理
默认情况下，<legend> 会“挖空” <fieldset> 上边框，形成视觉嵌入效果。但不同浏览器裁剪逻辑略有差异：Chrome 用文字背景色遮盖边框，Firefox 用透明挖空，Edge 有时保留边框残影。
- 若文字背景色不透明（如设了
background: white），务必加padding避免文字贴边难读 - 避免给
<legend>设border或outline：会干扰原生挖空行为，导致双线或错位 - 需要响应式字号时，优先用
rem或clamp()，别用固定px——否则小屏下文字溢出边框
fieldset 边框样式影响 legend 位置
<fieldset> 的 border 宽度直接影响 <legend> 的垂直对齐基准线。边框越粗，<legend> 默认上移越多；若同时设了 border-radius，部分浏览器（如旧版 Safari）可能完全丢失挖空效果。
- 统一用
border: 1px solid #ccc最稳妥，粗于 2px 易出偏移 - 禁用
border-radius：fieldset 不支持圆角边框 + legend 挖空的组合渲染 - 要微调 legend 垂直位置，用
margin-block-start（不是margin-top），值建议 ≤ 0.25em
替代方案：不用 fieldset 也能模拟分组+标题
如果交互需求简单（比如纯展示、无表单语义），或需要灵活控制边框/标题位置，可放弃 <fieldset>，改用 <div> + CSS 边框 + 定位模拟。但注意：这会丢失无障碍支持（如屏幕阅读器无法关联标题与控件组）。
立即学习“前端免费学习笔记（深入）”；
- 用
position: relative包裹容器，position: absolute定位标题，再配top: -0.75em模拟嵌入 - 手动加
aria-labelledby关联标题 ID，补全语义缺失 - 切勿在表单提交逻辑中混用——
<fieldset>的disabled属性能批量禁用子控件，<div>方案需手动遍历处理
