box-sizing: border-box 在 Chrome 和 Firefox 中不生效，主因是被更高优先级的重置样式覆盖；IE8 需加 -ms-box-sizing 前缀；flex 布局中 width 百分比失效与 flex-shrink 相关；表单元素滚动条问题源于浏览器默认内边距差异。
box-sizing: border-box 在 Chrome 和 Firefox 里不生效？检查是否被重置样式覆盖
很多开发者加了 *, *::before, *::after { box-sizing: border-box; } 还是发现某些元素宽度异常，根本原因是 CSS 优先级或层叠顺序问题。第三方库（比如 Normalize.css、Bootstrap）或自定义 reset 里可能有更具体的规则，把 box-sizing 又设回了 content-box。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，选中出问题的元素，在 Styles 面板里搜索
box-sizing，看哪条规则被划掉（strikethrough）——被覆盖的通常就是罪魁祸首 - 把全局设置改成带
!important的兜底写法：* { box-sizing: border-box !important; }（仅调试时用，上线前应定位并移除冲突源） - 避免在组件级 CSS 里反复写
box-sizing: border-box，统一收口到最外层 reset 或基础样式表
IE8 不支持 box-sizing？得用 polyfill 还是换思路
box-sizing: border-box 在 IE8 是部分支持的，但只认带 -ms- 前缀的写法：-ms-box-sizing: border-box，且必须放在标准属性前面，否则会被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 兼容 IE8 时，CSS 中必须这样写：
-ms-box-sizing: border-box; box-sizing: border-box; - 别指望
autoprefixer自动补全 IE8 前缀——它默认不处理 IE8，需显式配置browsers: ["IE >= 8"] - 如果项目已放弃 IE8，直接删掉所有
-ms-前缀，现代构建工具（Vite、Webpack + postcss）基本不需要手动干预
flex 容器里的子元素 width 百分比失效？border-box 不是万能解药
当父容器是 display: flex，子元素设了 width: 50% 却撑不满一行，往往不是 box-sizing 没起作用，而是 flex 默认的 flex-shrink: 1 在压缩内容，或者 flex-basis 干扰了 width 计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确认子元素是否设置了
flex: 0 0 auto或flex: none，否则width可能被忽略 -
box-sizing: border-box确保 padding/border 不撑宽盒子，但它不改变 flex 布局本身的尺寸分配逻辑 - 真要靠百分比控制宽度，建议改用
flex-basis: 50%，并显式设flex-shrink: 0
全局设 border-box 后，input[type="search"] 出现横向滚动条？内边距和框线没算准
某些浏览器（尤其是 Safari 和旧版 Edge）对表单控件有特殊渲染逻辑，box-sizing: border-box 虽然生效，但它们的默认 padding 和 border 值在不同引擎下不一致，导致实际可输入区域变窄，触发滚动条。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对
input、textarea、select单独重置：input, textarea, select { padding: 0.375rem 0.75rem; border-width: 1px; } - 不要依赖浏览器默认的
padding值，尤其避免只设padding-left或padding-right，容易在某些 UA 下失衡 - 用
appearance: none去除原生样式后，再统一控制尺寸，比硬调box-sizing更可靠
真正难的不是加那行 box-sizing: border-box，而是它生效之后，你才发现原来那些“理所当然”的 padding 和 width，早就被不同浏览器悄悄解释成了不同的东西。
