box-sizing 在老旧浏览器中并非解析错误而是支持缺失：ie6/7 完全忽略，ie8 仅标准模式下认 -ms-box-sizing 且对表单元素不稳定；必须声明 、显式加前缀、覆盖伪元素和表单控件，并对 ie6/7 的 button 采用组合样式替代。
老旧浏览器对 box-sizing 的“识别错误”，本质不是解析出错，而是压根不支持或只在特定条件下部分支持——IE6/7 完全忽略该属性，IE8 仅标准模式下认 -ms-box-sizing 且对 button 等元素行为不稳定。
确认是否进入怪异模式：检查 是否缺失
IE6–8 没有 就强制进入怪异模式，此时 <code>box-sizing 属性连解析都不会触发，开发者工具里显示为灰色或带删除线。这不是写法问题，是渲染引擎根本没加载该 CSS 特性。
必须是 HTML 文件第一行，前面不能有任何空格、注释或 XML 声明- 即使写了
-ms-box-sizing: border-box，在怪异模式下也完全无效 - 用 DevTools 查看文档模式（Document Mode），IE8 下若显示 “Quirks” 或 “IE7 Standards”，说明 DOCTYPE 失效
IE8 及以下必须显式加前缀且顺序正确
IE8 支持 box-sizing，但只认 -ms-box-sizing，且现代构建工具（如 PostCSS autoprefixer）默认不处理 IE8，需手动补全或显式配置 browsers: ["IE >= 8"]。
- 只写
box-sizing: border-box在 IE8 中会被静默忽略 - 必须同时声明：
-ms-box-sizing: border-box和box-sizing: border-box，且前者在前 - IE6/7 对任何前缀（
-ms-、-moz-、-webkit-）都无效，不要浪费时间尝试
伪元素和表单控件必须单独覆盖
* { box-sizing: border-box; } 不会继承到 ::before 和 ::after，而旧版 Safari 和某些 IE8 场景下，input、button、select 也不响应全局声明，导致装饰块或按钮撑宽容器。
- 真正起效的写法是：
*, *::before, *::after { box-sizing: border-box; }，且必须放在所有 CSS 的最顶部 - 对表单控件建议白名单控制：
input, select, textarea, button { box-sizing: content-box; }（按需调整，避免文字截断） - 第三方 UI 库（如 Element Plus）的内部节点（如
.el-input__inner）需单独覆盖，不能依赖全局通配符
IE6–7 的 button 内边距问题不能靠 box-sizing 解决
IE6–7 的 button 默认内边距来自硬编码的 user agent stylesheet，padding: 0 都压不住，更别说 box-sizing —— 它们根本不识别这个属性。
- 必须放弃单属性思路，改用组合控制：
padding: 0+border: 1px solid transparent+line-height: 1.4+height: 28px - 对 IE6–7 需额外加
display: inline-block; zoom: 1;触发 hasLayout，防止边框浮动 - 避免用
background-image配合 padding 挤图标空间，IE6–7 不支持 SVG，背景定位极易偏移
最容易被忽略的点是：你以为写了 box-sizing: border-box 就万事大吉，其实它只在标准模式、支持该属性、且未被更高权重样式覆盖的前提下才生效；漏掉 、伪元素、表单控件或 IE6–7 的 button，就等于没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
