fieldset 的 padding 不能被 * { box-sizing: border-box } 修复，因其默认 padding 来自 ua 样式表且优先级更高；box-sizing 不影响已设定的 padding 值，必须显式重置 fieldset 和 legend 的 padding/margin 才能统一控制。
fieldset 的 padding 为什么不能被 * { box-sizing: border-box } 修复
因为 fieldset 的默认 padding 来自浏览器 UA 样式表，且优先级高于通配符规则；box-sizing 只影响尺寸计算逻辑，不覆盖 UA 设定的 padding 值。即使你写了 * { box-sizing: border-box }，Chrome 和 Firefox 仍会坚持用 padding: 0.35em 0.75em，Safari 则可能只应用上边距或完全忽略——这不是盒模型类型问题，而是样式来源冲突。
必须显式重置 fieldset 和 legend 的 padding/margin
唯一可靠的方式是直接覆盖 UA 样式：
-
fieldset { padding: 0; margin: 0; }—— 彻底清空，再按需加回（推荐用px，如padding: 8px 12px;） -
legend { margin: 0; padding: 0; }—— 否则legend在 Safari 下会上移、在 Chrome 下可能被截断 - 避免混用
box-sizing: border-box和em单位，尤其在 IE8–11 中会导致整个声明块被忽略
第三方 UI 库中 fieldset 的 padding 被意外覆盖
像 Ant Design 或某些 form 组件库会在内部重置 fieldset，如果你额外写了全局 fieldset { padding: 0; }，反而会破坏其布局。排查时务必打开 DevTools，检查 computed 样式里 padding 的来源：是 UA、你的 CSS，还是第三方库？
若项目已引入这类库，建议改用更精确的选择器，比如 .my-form fieldset，而不是无差别覆盖所有 fieldset。
旧版 Safari 和 IE 对 fieldset padding 的兼容性陷阱
旧 Safari（≤14）和 IE8–11 对 fieldset 的 padding 支持极不稳定：
- 不要用
%或em，全部统一为px - 避免在同一个声明块中混用
box-sizing和padding（IE8 直接丢弃整条规则） - 如果必须支持 IE8，干脆放弃
fieldset的语义化间距，全靠外层容器控制留白
最麻烦的不是写法，而是 legend 的定位逻辑独立于 fieldset 的盒模型——它“浮”在上边距区域里，重置时漏掉它，视觉错位就藏不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
