fieldset 的 padding 在各浏览器中默认值不同且 box-sizing: border-box 对其无效，必须显式重置 fieldset 和 legend 的 padding/margin 并统一使用 px 单位以确保跨浏览器一致性。
fieldset 的 padding 在 Chrome、Firefox 和 Safari 中默认值不一致，box-sizing: border-box 对它完全无效——这不是你 CSS 写错了，是浏览器 UA 样式硬编码的优先级太高。
为什么 * { box-sizing: border-box } 对 fieldset 没用
UA 样式表（比如 Chrome 的内置 CSS）直接写了 fieldset { padding: 0.35em 0.75em; }，这条规则优先级高于通配符；而且 legend 的定位逻辑独立于父 fieldset 的盒模型，box-sizing 根本不参与它的渲染流程。所以即使你设了 width: 100%，总宽度在各浏览器里依然不同。
必须显式重置 fieldset 和 legend 的 padding/margin
只清空 fieldset 不够，legend 默认带 margin 且会“上浮”侵入 fieldset 顶部区域，导致视觉错位：
-
fieldset { padding: 0; margin: 0; }—— 彻底清空，再按需加回（推荐用px，比如padding: 8px 12px;，避免em在 font-size 变动时漂移） -
legend { margin: 0; padding: 0; }—— 否则 Safari 下容易上移，Chrome 下可能被截断 - 如果需要居中
legend，别依赖默认行为，加legend { text-align: center; }或用 flex 包裹
兼容旧版 IE 和第三方库覆盖风险
IE8–11 对 fieldset 的 padding 支持极不稳定，且会把 border: none 当作占位符挤压内容区：
- 若需兼容 IE8，全部用
px单位，禁用em和百分比 - 避免和
box-sizing: border-box混用（IE8 会忽略整个声明块） - 引入 Ant Design 或 Bootstrap 等库时，先检查 DevTools 的 computed 样式，确认
padding来源是 UA、自定义 CSS 还是库的重置——有些 UI 库已隐式处理，你再写一遍反而破坏布局
最常被忽略的一点：重置必须同时作用于 fieldset 和 legend，缺一不可；而单位选择（px vs em）不是风格偏好，是能否稳定跨浏览器的关键判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
