<legend>是<fieldset>的语义必需子元素，必须作为首个子元素且不可省略；省略或错位将导致分组失效、无障碍支持断裂；仅允许内联元素嵌套，禁止块级元素；需确保文本可访问、位置稳定、动态更新时配合ARIA。
用 <legend> 作为 <fieldset> 的唯一合法标题
<legend> 不是可选的修饰标签，而是 <fieldset> 的语义必需子元素——浏览器和读屏器依赖它识别分组意图。如果省略或用 <h3>、<div> 替代，会导致表单结构断裂、无障碍支持失效，且部分浏览器（如旧版 IE）会渲染异常。
正确写法必须是：
<fieldset> <legend>账户信息</legend> <label>用户名：<input name="username"></label> <label>邮箱：<input name="email"></label> </fieldset>
-
<legend>必须直接位于<fieldset>开始标签之后，且只能出现一次 - 不支持嵌套其他块级元素（如
<p>），但可内联使用<strong>或<span> - 若需图标或额外样式，应通过 CSS 伪元素（如
::before）添加，而非在<legend>内硬塞<img>
让 <legend> 支持多行文本或复杂排版
原生 <legend> 是内联元素，换行、浮动、flex 布局默认不生效，强行加 display: block 可能破坏其与 <fieldset> 边框的锚定关系（比如标题偏移、边框断开）。
安全做法是：
- 用
white-space: pre-line或word-break: break-word控制换行，避免折断单词 - 通过
padding和margin微调位置，而不是position: absolute - 如需图标+文字组合，推荐：
<legend><span aria-hidden="true" style="margin-right: 8px;">?</span>登录凭证</legend>
避免用 JavaScript 动态替换 <legend> 内容引发的可访问性问题
读屏器通常只在初始渲染时缓存 <legend> 文本，后续用 JS 修改 textContent 不会自动通知辅助技术更新上下文。
若必须动态更新（如多语言切换、步骤引导），应配合 ARIA 属性：
- 给
<legend>添加id（如id="step-legend"） - 用
aria-labelledby="step-legend"显式关联受影响的控件组 - 更新文本后，触发
aria-live="polite"区域播报变更（仅当内容有操作意义时）
Chrome/Firefox 中 <legend> 垂直居中异常的常见原因
现代浏览器默认将 <legend> 垂直居中于 <fieldset> 边框顶部，但实际常出现偏高或偏低——根本原因是 <legend> 的 line-height 与父容器 font-size 不匹配，或存在未重置的全局样式干扰。
快速修复方式：
- 显式设置
line-height: 1.2或line-height: normal在<legend>上 - 避免对
<fieldset>设置padding-top，它会挤压<legend>的定位空间 - 在 Firefox 中若仍错位，加
vertical-align: top（Chrome 不需要，但无害）
真正难处理的是跨浏览器下边框与标题的像素级对齐，这往往不是代码问题，而是字体度量差异导致的视觉误差——别花时间像素对齐，优先保证语义正确和键盘焦点逻辑完整。
