旧版IE（IE6–8）怪异模式下width指content+padding+border，现代浏览器默认仅指content区；必须添加<!DOCTYPE html>并全局设置, ::before, *::after { box-sizing: border-box; }统一盒模型，IE8需-ms-box-sizing前缀，IE6/7不支持box-sizing需手动补偿。
旧版 IE（IE6–8）在怪异模式下把 width 解释为「content + padding + border」，而现代浏览器默认只算 content 区域——这不是 bug，是渲染引擎根本没对齐。
IE6–8 怪异模式下 width 的真实含义
没有 <!DOCTYPE html> 时，IE6–8 自动进入怪异模式，此时 width: 200px 表示整个盒子总宽 200px，内边距和边框从这 200px 里“扣”；Chrome/Firefox 默认标准模式，width: 200px 仅指内容区，加上 padding: 10px 和 border: 1px 后实际占位变成 222px。
- 验证方式：IE 开发者工具（F12）右上角显示 “Quirks” 就确认踩中
- 即使写了
<!DOCTYPE html>，开头有空格、注释或 XML 声明也会退化为怪异模式 - 这种差异不是 CSS 写错了，而是同一行代码在不同引擎里被读成两个意思
box-sizing: border-box 并不能直接修复 IE6/7
box-sizing 属性在 IE6/7 中完全不识别，写 * { box-sizing: border-box; } 对它们无效——它们始终按“怪异模式逻辑”渲染，但你无法用 CSS 覆盖它。
- IE8 支持
box-sizing，但必须加-ms-box-sizing: border-box才生效 - IE7 及更早版本只能靠手动补偿：
width: calc(100% - 20px)（假设左右 padding 共 20px） - 别指望 JS 动态计算 offsetWidth 来“修正”，因为 offsetWidth 在 IE7 下也按怪异逻辑返回
伪元素和表单控件是重置的盲区
就算你写了 * { box-sizing: border-box; }，::before 和 ::after 仍走默认 content-box，而 <input>、<textarea> 等原生控件在 Safari/旧 Chrome 下会因 border-box 出现文字截断或高度错乱。
立即学习“前端免费学习笔记（深入）”；
- 正确写法必须显式包含伪元素：
*, *::before, *::after { box-sizing: border-box; } - 表单控件建议白名单重置：
input, select, textarea, button { box-sizing: content-box; } - 第三方 UI 库（如 Ant Design）通常已内部处理盒模型，额外全局重置反而破坏布局
真正难处理的不是 IE6/7 的缺失支持，而是现代项目里混用动态插入内容、Shadow DOM、iframe 时，box-sizing 不会自动穿透——每个上下文都得单独声明。
