IE6–7完全不支持box-sizing，IE8仅支持-ms-box-sizing且需标准模式；必须声明并置于首行，autoprefixer默认不处理IE8，需手动配置或手写前缀；IE6–7需放弃box-sizing改用尺寸预扣减或布局重构。
box-sizing 在 IE6–7 中完全不被识别，不是“失效”，而是压根不解析——写不写都一样。IE8 是分水岭：支持但必须用 -ms-box-sizing，且只在标准模式下生效。降级不是加个前缀就能糊弄过去，得拆成三层应对：文档模式、语法兼容、渲染兜底。
必须加 ，且放在第一行
IE6–8 没有 就进怪异模式（Quirks Mode），此时 <code>box-sizing 属性在 DevTools 里直接显示为灰色或带删除线，连解析都不走。哪怕你写了 -ms-box-sizing: border-box，也毫无作用。
必须是 HTML 文件最开头的字符，前面不能有空格、注释、XML 声明- IE8 不认
box-sizing，只认-ms-box-sizing；IE9+ 才开始支持无前缀版本 - 检查方式：打开 IE 开发者工具 → 查看「文档模式」是否为「IE8 标准」或更高；若显示「IE8（怪异）」，说明 DOCTYPE 失效
IE8 需显式声明 -ms-box-sizing，且 autoprefixer 默认不处理
PostCSS 的 autoprefixer 默认目标浏览器是 last 2 versions, not dead，它不会给 IE8 补 -ms-box-sizing。你写了 box-sizing: border-box，输出 CSS 里依然没前缀，IE8 就当没看见。
- 必须手动配置 browserslist：加入
"IE >= 8"或显式写"IE 8" - 或者干脆手写：
-ms-box-sizing: border-box; box-sizing: border-box;，确保 IE8 优先读到前缀版 - 顺序很重要：
-ms-box-sizing必须写在box-sizing前面，否则现代浏览器可能覆盖掉旧属性（尽管实际影响小，但属确定性风险）
IE6–7 只能放弃 box-sizing，改用尺寸预扣减或布局重构
没有商量余地：box-sizing 在 IE6–7 中属于未定义行为，任何前缀、hack、JS 注入样式都无效。这时候所谓“降级”，其实是绕开它。
立即学习“前端免费学习笔记（深入）”；
- 对固定宽高的容器（如按钮、卡片），手动把
padding和border从width/height里扣掉：width: 200px; padding: 10px;→ 改成width: 180px; - 用
display: table-cell或嵌套div模拟 border-box 行为（成本高，仅限关键组件） - 如果项目仍需支持 IE6–7，建议用条件注释加载独立 CSS：
<!--[if lte IE 7]><link rel="stylesheet" href="ie67.css"><![endif]-->，里面全用 content-box 计算逻辑重写关键模块
伪元素和表单控件容易漏掉，必须单独覆盖
* { box-sizing: border-box; } 看似全局，但 ::before/::after 不继承该值，而 <input>、<select></select> 等原生控件在某些旧版 Safari/IE 下会因 border-box 导致文字截断或内边距错位。
- 真正安全的重置写法是：
*, *::before, *::after { box-sizing: border-box; }，且这条规则必须放在所有 CSS 最顶部 - 表单控件建议白名单放行：
input, select, textarea, button { box-sizing: content-box; }（按实际表现微调） - 动态插入的节点（如 JS 创建的
div、第三方弹窗）是否受控，取决于这条规则是否在它们创建前已注入 DOM —— 这点常被忽略
最常被跳过的不是前缀，而是文档模式；最容易被误判的不是“IE8 不支持”，而是“我以为加了前缀就稳了”。box-sizing 的兼容性链条里， 是地基，<code>-ms-box-sizing 是砖块，而 IE6–7 根本不给你砌墙的机会——得换图纸。
