能解决IE宽度偏差，但必须全局设置, ::before, *::after { box-sizing: border-box; }并覆盖伪元素；IE8需加-ms-box-sizing前缀，IE7及以下不支持。
box-sizing: border-box 能不能直接解决 IE 宽度偏差
能，但必须全局生效且覆盖所有元素——包括伪元素。IE6–7 怪异模式默认用 border-box 计算，而现代浏览器（Chrome/Firefox/Edge）默认是 content-box，这种根本差异导致同一段 width: 200px; padding: 10px; 在 IE7 下总宽 200px，在 Chrome 下却是 220px。不统一就必然错位。
为什么只写 * { box-sizing: border-box; } 还不够
因为伪元素（::before、::after）不会继承该声明，它们仍走浏览器默认的 content-box。一旦你用 ::before { content: ""; display: block; width: 100%; } 做装饰或清浮动，它就会意外撑出容器。
- 必须写成：
*, *::before, *::after { box-sizing: border-box; } - 这条规则要放在所有 CSS 文件最顶部，否则会被 Normalize.css、Bootstrap 等重置样式覆盖
- 在开发者工具里检查出问题的元素，如果
box-sizing属性被划掉，说明被更高优先级规则干掉了
IE8 及更老版本需要加前缀吗
IE8 支持 box-sizing，但只认 -ms-box-sizing；IE7 及以下完全不支持，没法用 CSS 修复。
- 兼容 IE8 时，必须这样写：
-ms-box-sizing: border-box; box-sizing: border-box;（顺序不能错） -
autoprefixer默认不处理 IE8，需显式配置browsers: ["IE >= 8"] - 如果项目已放弃 IE8，直接删掉
-ms-前缀，现代构建链路（Vite/Webpack + PostCSS）无需手动干预
表单控件和 Flex/Grid 里 box-sizing 容易漏在哪
表单元素（input、textarea）在 Safari 和旧版 Edge 中有特殊渲染逻辑，即使设了 border-box，默认 padding 值仍可能不一致，导致横向滚动条；Flex/Grid 子项的 box-sizing 不影响布局轨道划分，但会改变实际可用内容区大小。
-
input[type="search"]出滚动条？单独加padding: 0.375em; border: 1px solid;并确认没有额外line-height拉高 - Flex 项设了
flex-basis: 200px但又有padding: 12px和border: 2px？若没box-sizing: border-box，实际占位是 228px，可能挤垮布局 - Shadow DOM 或 iframe 里的样式不会继承主页面的
box-sizing，得单独重置
真正起效的不是“写了这一行”，而是它从 HTML 第一个字节开始就控制了每个新插入节点的尺寸逻辑——动态生成的元素、第三方组件、甚至 SVG 内嵌的 <foreignobject></foreignobject>，都得被这套规则兜住。漏掉任何一个环节，偏差就藏在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
