要彻底去掉 fieldset 默认边框和 legend 样式，需同时设置 fieldset 的 border: 0、padding: 0、margin: 0；legend 设 width: fit-content、padding: 0、height: 1em、line-height: 1em、position: static，并添加 legend::before { content: "" }。
fieldset 默认边框和图例怎么彻底去掉
直接用 border: none 和 outline: none 不够——fieldset 的默认 border 有内置样式（含圆角、阴影感），且 legend 会强行撑高、偏移，导致上下留白异常。必须同时重置两者的渲染行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
fieldset加border: 0（不是none，部分旧版 Safari 对none处理不一致） - 加
padding: 0和margin: 0，否则内部元素仍受默认内边距挤压 - 对
legend设置width: fit-content+padding: 0+height: 1em+line-height: 1em，再加position: static（默认是 relative 且带位移） - 最后补一句
legend::before { content: "" }防某些浏览器注入伪元素干扰布局
扁平化输入控件如何与 fieldset 保持视觉连贯
如果只清空 fieldset 边框但保留 input、select 的默认轮廓（如 Chrome 的蓝色 focus ring），整体就还是“非扁平”。关键在统一焦点反馈和禁用态表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有表单控件统一加
outline: none，改用box-shadow: 0 0 0 2px #007bff模拟 focus 状态（颜色按品牌调） -
input:disabled和select:disabled显式设opacity: 0.6+cursor: not-allowed，避免依赖浏览器默认灰度 - 若用
appearance: none去除原生下拉箭头，记得为select手动加背景图或伪元素模拟箭头，否则在 Safari 下可能完全不可见
无障碍访问会被 fieldset 扁平化破坏吗
不会——只要语义结构完整，视觉扁平不影响屏幕阅读器识别。真正影响可访问性的，是删掉 legend 或用 CSS display: none 隐藏它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
legend必须保留，哪怕只是空格或占位文本；可用visually-hidden类做“视觉隐藏但语义保留” - 如果表单分组逻辑清晰（如“登录凭证”“隐私选项”），
legend文本应准确描述该组目的，不能为了“扁平”而删减语义 - 测试时用 VoiceOver 或 NVDA 检查：焦点进入
fieldset后，是否先读出legend再读控件，顺序是否符合预期
移动端 Safari 的 fieldset 渲染差异怎么处理
iOS 15+ 之后，Safari 对 fieldset 的 min-width 和 legend 宽度计算更激进，常导致内容换行或横向溢出，尤其在横屏小屏设备上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
fieldset加min-width: 0（覆盖浏览器默认最小宽度） -
legend加white-space: nowrap+overflow: hidden+text-overflow: ellipsis防文字撑开 - 必要时对
fieldset加contain: layout style paint，缓解 iOS WebKit 的重排卡顿
