fieldset 的 padding 在 chrome/firefox/safari 中表现不一致，chrome 和 firefox 默认为 0.35em 0.75em，safari 可能仅 0.35em 或忽略；* { box-sizing: border-box } 对其无效，因其 ua 样式优先级高且 legend 定位逻辑独立；需显式重置 fieldset 和 legend 的 padding/margin，并注意兼容性与第三方库覆盖。
fieldset 的 padding 在 Chrome/Firefox/Safari 中表现不一致
直接看现象：fieldset 在 Chrome 和 Firefox 下默认有 padding: 0.35em 0.75em，而 Safari（尤其是旧版）可能只有 padding: 0.35em 或完全忽略内边距；更麻烦的是，它的 legend 子元素会“侵入”上边距区域，导致视觉错位。这种差异不是 box-sizing 导致的——fieldset 默认就是 content-box，但 UA 样式对 padding 的实现本身就不统一。
为什么 * { box-sizing: border-box } 对 fieldset 无效
通配符重置能覆盖大多数元素，但 fieldset 是个例外：它的 padding 是由浏览器 UA 样式表通过高优先级规则注入的，比如 Chrome 的 UA CSS 里写的是 fieldset { padding: 0.35em 0.75em; }，而 * { box-sizing: border-box; } 不会改它默认的 padding 值，也不会影响 legend 的定位逻辑。所以即使你设了 border-box，width: 100% 的 fieldset 依然在不同浏览器里撑出不同总宽。
必须显式重置 fieldset 的 padding 和 margin
解决办法不是靠全局重置，而是针对性覆盖 UA 样式：
- 用
fieldset { padding: 0; margin: 0; }彻底清空，再按需加回——这是最可控的方式 - 如果保留语义化间距，建议用固定像素值而非 em，比如
padding: 8px 12px;，避免字体缩放或 font-size 变动带来的计算漂移 - 必须同时重置
legend：它默认是块级且带 margin，要让它正确居中或对齐，得加legend { margin: 0; padding: 0; }，否则 Safari 下容易上移、Chrome 下可能被截断 - IE8–11 对
fieldset的 padding 支持不稳定，若需兼容，不要依赖百分比或 em 单位，全部用 px，并避免box-sizing: border-box与 padding 混用（IE8 会忽略整个声明块）
第三方库或框架中 fieldset 的 padding 被二次覆盖
像 Bootstrap 4+、Tailwind CSS 这类工具链，默认不处理 fieldset，但某些 UI 组件库（如 Ant Design）会在 form 相关组件里隐式重置它。如果你引入了这类库，又自己写了 fieldset { padding: 0; }，反而可能破坏其内部布局。排查时注意：
- 打开 DevTools，检查 computed 样式里
padding的来源，确认是 UA、自定义 CSS 还是第三方样式 - 用
fieldset:not([class]) { padding: 0; }避免误伤已加 class 的定制 fieldset - 如果项目大量使用
fieldset，建议封装一个基础类，如.form-fieldset { padding: 8px 12px; margin: 0; }，而不是依赖全局重置
真正麻烦的不是 padding 值本身，而是 legend 和 fieldset 边框之间的相对定位关系——这个在各浏览器渲染引擎里至今没完全对齐，所以别指望一次重置就彻底“修复”，得结合视觉回归测试来确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
