<p>必须全局设置 , ::before , *::after { box-sizing: border-box; }，因为 box-sizing 不继承，仅设 html 或 body 无效，且伪元素未重置会导致 UI 库布局错位。</p>
直接加 *, *::before, *::after { box-sizing: border-box; } 就能解决绝大多数升级后溢出问题，但漏掉任一 selector 都会让 padding/border 悄悄外扩——这不是“升级失败”，而是“重置不全”。
为什么只给 html 或 body 设 box-sizing 没用
box-sizing 不继承。就算你在 html 上写了 box-sizing: border-box，所有子元素（包括 .card、.input-field、甚至第三方组件内部的 ::before）仍按默认的 content-box 计算尺寸。
典型表现：
-
width: 100%的 input 加了padding: 12px和border: 1px，实际宽度 = 100% + 24px + 2px → 撑破父容器 - Flex 容器里两个等宽按钮，右边那个被挤到下一行
- 卡片标题右侧文字被切掉，DevTools 显示内容区已超出容器边界
必须覆盖伪元素：*::before, *::after 不是可选项
现代 UI 库（如 Ant Design、Element Plus）大量依赖伪元素做装饰、三角、边框模拟；Safari 和旧版 Chrome 中，若没显式声明 *::before 和 *::after，它们仍走 content-box，导致视觉错位或布局断裂。
立即学习“前端免费学习笔记（深入）”；
正确写法只有这一种：
*, *::before, *::after {
box-sizing: border-box;
}
注意：
-
html, body { box-sizing: border-box }不行，子元素不受影响 -
*:not(img)这类排除写法危险：漏掉svg、iframe、canvas等替换元素的 wrapper，它们也可能带 padding - 如果项目用了 Bootstrap v4 或更早版本，它没包含伪元素重置，必须手动补上
box-sizing: border-box 解决不了的溢出场景
它只改尺寸计算逻辑，不约束内容本身是否溢出。以下情况即使开了 border-box，仍需额外处理：
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还要补width: 100%） - Flex 子项中的表单控件（
input、textarea、button）：默认min-width: auto会阻止收缩，得显式写min-width: 0 -
table：无视max-width和box-sizing，得配table-layout: fixed+width: 100% - 带
white-space: nowrap的文本：需要overflow: hidden+text-overflow: ellipsis（且必须配合white-space: nowrap）
第三方库和 legacy CSS 的干扰点
真正难排查的不是那三行代码怎么写，而是后续维护中：
- 有人加了
.legacy-widget { box-sizing: content-box !important; }，结果只在 Safari 上出问题 - 某插件 CSS 文件里漏写了
::after，但它的三角图标在 iOS WebView 中偏移 2px - Ant Design 的
.ant-input-affix-wrapper内部用了伪元素画清空按钮，若你没全局重置，它在小屏下可能横向溢出
上线前务必检查 DevTools 的 Styles 面板：灰色带 invalid 提示的属性，往往就是某个被覆盖或未生效的 box-sizing 规则。
