fieldset 的语义不可替代，但需手动补 aria 属性、避免框架自动包裹、确保非空 legend、调整 css 避免 legend 错位，并优先用原生结构保障可访问性。
fieldset 在 Bootstrap 5 中被自动剥离，怎么找回语义？
Bootstrap 5 的 .form-group 和 .row 组件会忽略或移除你写的 fieldset，导致 DOM 里只剩 div，legend 丢失，屏幕阅读器读不出分组意图。
实操建议：
- 在渲染后用浏览器开发者工具检查 DOM，确认
fieldset和legend是否真实存在；若被删，改用div包裹 + 手动加role="group"和aria-labelledby补语义（但不如原生可靠） - 禁用 Bootstrap 的表单自动包裹逻辑：在初始化时传入
autoWrap: false（如使用其 JS 插件），或直接写纯 HTML，不套用.form类 - 若必须用 Bootstrap 样式，把
fieldset当外层容器，内部用div class="row"，而非让 Bootstrap 的栅格类作用于fieldset自身
Ant Design 的 Form.Item 与 fieldset 冲突怎么办？
Ant Design 的 Form.Item 默认生成 div 结构，且会拦截 disabled 属性传递——你给 fieldset 加 disabled，内部的 Form.Item 不会响应，键盘仍可聚焦，值也可能提交。
实操建议：
- 别把
Form.Item塞进fieldset；改为用Form的disabled属性控制整表单，或用formItemProps.disabled单独设 - 若需视觉分组，用
Card或带标题的Space替代fieldset，再通过aria-describedby关联说明文字 - 真要保留
fieldset语义，就得绕开 AntD 的表单组件，手写原生控件，并用useForm的setFields手动同步状态
用 CSS Grid/Flex 布局时，fieldset 的 padding 和 border-radius 怎么不破坏 legend 定位？
fieldset 的 border-radius 会让 legend 溢出裁剪区域，尤其当它还浮在边框左上角时；而 padding 调大后，legend 可能被压扁或错位。
实操建议：
- 设
fieldset { overflow: hidden; }配合border-radius，否则legend会穿出圆角外 - 避免直接调
fieldset的padding-top；想留空间，改用legend { margin-top: 0.75rem; }+fieldset > * { margin-top: 0; } - 如果用了
display: grid，别设fieldset { display: grid; }—— 改用div.form-grid包一层，fieldset保持默认display: block - Firefox 对
legend的max-width渲染不稳定，换行用white-space: normal;显式声明，别依赖默认行为
嵌套 fieldset 在 Tailwind CSS 下 Tab 键顺序混乱，怎么修？
Tailwind 默认不干预焦点流，但多层 fieldset 嵌套后，Tab 键容易卡在某一层出不来，尤其当内层 legend 是空的或被 sr-only 隐藏时，辅助技术可能跳过整个分组。
实操建议：
- 单页表单尽量只用一层
fieldset；视觉分区靠divide-y或border-b实现，不靠嵌套 - 必须嵌套时，每层都配非空
legend，哪怕只是<legend class="sr-only">二级分组</legend> - 用
document.activeElement+console.log实时观察焦点路径，别信“应该能出来”的假设 - Tailwind 的
focus-within对fieldset支持不一致，慎用于触发外层样式；改用 JavaScript 监听focusin事件手动管理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
