legend必须嵌套在fieldset中才有效，单独使用或置于div等元素内均无效；它专为fieldset提供可访问标题，影响屏幕阅读器播报逻辑，且位置样式受限，现代布局中需注意兼容性陷阱。
legend 必须嵌套在 fieldset 里才能生效
单独写 <legend>标题</legend> 不会渲染出任何可见内容，浏览器会直接忽略它。它不是独立语义标签，而是 <fieldset> 的专属子元素，作用是为该分组提供可访问的标题文本。
常见错误是把 <legend> 放在 <div> 或表单顶层，结果页面看不到标题，屏幕阅读器也读不到——因为 DOM 结构不合法。
-
<fieldset><legend>登录信息</legend><input name="user"></fieldset>✅ 正确 -
<legend>登录信息</legend><input name="user">❌ 无效，无渲染、无障碍失效 -
<div><legend>登录信息</legend></div>❌ 同样无效，HTML 规范不允许
legend 默认出现在 fieldset 边框左上角，位置不可用 CSS 定位强行移动
浏览器对 <legend> 有特殊渲染逻辑：它“属于”边框的一部分，不是普通块级子元素。用 position: absolute 或 margin-left 等方式试图把它拉到右边或居中，往往导致边框断裂、文字重叠或布局错乱。
真正可控的方式只有两种：
立即学习“前端免费学习笔记（深入）”；
- 用
text-align: center或text-align: right控制文字对齐（仅影响文字本身，不影响边框锚点） - 用
display: contents拆解<legend>的默认盒模型（但会破坏部分旧浏览器兼容性，IE 完全不支持） - 若必须彻底自定义位置和样式，放弃
<fieldset>/<legend>，改用<section>+ ARIA：<section aria-labelledby="lbl1"><h3 id="lbl1">登录信息</h3></section>
legend 的可访问性价值远大于视觉装饰
对于使用屏幕阅读器的用户，<legend> 是 <fieldset> 内所有控件的隐式标签。当焦点进入某个 <input>，阅读器会自动播报 “用户名，登录信息组”，而不是干巴巴的 “编辑框”。这点无法用 <label> 替代。
所以别为了省事用 <h3> 代替 <legend> —— 除非你手动补全 aria-describedby 和焦点管理，否则就等于主动放弃表单分组的语义完整性。
- 每个
<fieldset>最好只含一个<legend>；多个会导致阅读器混淆 -
<legend>文本应简洁明确，避免 “请填写以下内容” 这类空泛表述 - 如果分组内只有单个控件（比如一个开关），用
<legend>反而增加冗余，此时<label>更合适
fieldset + legend 在现代 CSS 布局中的兼容性陷阱
某些 CSS 重置库（如 normalize.css）或 UI 框架（如 Bootstrap）会重设 <fieldset> 的 border、padding 或 margin，导致 <legend> 相对位置偏移甚至被裁切。尤其在 Flex/Grid 容器中，<fieldset> 的默认 display 行为可能与父容器冲突。
- 检查 computed styles 中
fieldset的border是否被设为none—— 如果没有边框，<legend>会退化为普通内联文本，失去分组语义的视觉锚点 - 避免对
<fieldset>设置display: flex；如需弹性布局，应在内部包裹一层<div> - Chrome 115+ 对
<legend>的width计算有细微变化，若用了固定宽度，建议加max-width: fit-content防溢出
<section> + aria-current 比硬套 fieldset 更自然。 
