chrome 下 fieldset 的 padding 默认值是 0.35em 0.75em，该值随 font-size 浮动导致横向尺寸不稳定；legend 的 margin-top 失效因其锚点绑定 fieldset 边框，应改用上下边距组合并确保其为首个子元素。
Chrome 下 fieldset 的 padding 默认值是多少
Chrome 对 fieldset 的 UA 样式定义为 padding: 0.35em 0.75em，这个值在渲染时会随 font-size 变化而浮动，导致横向尺寸不稳定——尤其在响应式布局或字体缩放场景下，左右内边距可能撑出意外宽度。它不是 bug，而是规范允许的 UA 实现差异，但你无法靠 * { box-sizing: border-box } 覆盖它。
legend 在 Chrome 中 margin-top 不生效的常见原因
legend 的 margin-top 在 Chrome 里常“消失”，本质是它的定位锚点绑定在 fieldset 上边框，而非普通块流。即使设了 margin-top: 1rem，浏览器仍优先按原生嵌入逻辑计算位置，导致样式被忽略。
- 别用
margin-top控制 legend 垂直位置，改用margin: 0.5em auto 0.75em（上/下边距组合）更可靠 - 确保
legend是fieldset的第一个子元素，否则语义锚点失效，margin 行为更不可控 - 避免给
fieldset设overflow: hidden或display: flex，这两者会切断 legend 的锚定机制，让 margin 完全失灵
Chrome 中 legend 左对齐却贴着上边框的写法
想让 legend 左对齐、文字离上边框有呼吸感，又不破坏嵌入锚点，不能只靠 padding-left 推移文字——那会把文字“挤”进边框内部，视觉上像被裁掉一半。
- 正确做法：
legend { display: block; margin-left: 1rem; margin-top: 0; margin-bottom: 0.5rem; } - 必须保留
margin-bottom，否则和下方控件没间距，Chrome 渲染会显得拥挤 - 如果用了
border-radius，fieldset必须同步加overflow: hidden，否则 legend 文字会溢出圆角外——Chrome 尤其明显
Chrome 与其他浏览器共存时最易忽略的兼容点
Chrome 的 fieldset 行为看似稳定，但一旦引入第三方库（如 Ant Design、Bootstrap），它的 UA 样式就容易被覆盖或干扰。比如 Bootstrap 5.1 显式重置了 fieldset 的 padding-block-start 和 padding-inline-start，若你再写 fieldset { padding: 0 }，反而可能和库的 reset 冲突。
- 调试时优先看 DevTools 的 Computed 样式面板，确认
padding来源是 UA、自定义 CSS 还是第三方 - IE11 及旧 Safari 对
em单位支持弱，若需兼容，全部改用px（如padding: 8px 12px） - 禁用状态
fieldset[disabled]在 Chrome 下仍显示边框，需手动加opacity: 0.7或box-shadow: inset 0 0 0 2px #ccc才有视觉反馈
真正麻烦的不是调通 Chrome，而是改完后在 Safari 里发现 legend 被截半、Firefox 里换行错位——这些细节藏在 UA 样式和锚点机制的夹缝里，得一个个试出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
