怪异盒模型中width包含border和padding，内容区宽度=width−padding−border；若结果为负则钳位至0，导致border溢出或内容隐藏，而标准模型中width仅指内容区，border和padding额外增加。
当 width 小于左右 border 总和时，怪异盒模型不会报错或截断，而是强制将内容区宽度压缩为 0 或负值——但渲染引擎会把它“钳位”到最小可显示宽度（通常 ≥ 0），导致 padding 和 border 依然存在，内容被挤出或隐藏。这不是 bug，是 IE6–8 怪异模式下对 width 的语义定义：它代表「整个盒子的总宽」，而内容区 = width − padding − border，计算结果为负就归零。
怪异模式下 width 小于 border 的实际表现
比如：width: 10px; border-left: 8px solid #000; border-right: 8px solid #000;，在 IE6 怪异模式中：
- 浏览器仍按「总宽 = 10px」理解，于是内容区理论宽度 = 10 − 0 − 16 = −6px → 实际渲染为 0px
- 左右 border 各占 8px，共 16px，但父容器只分配了 10px 宽度 → border 溢出、重叠、覆盖邻近元素
- 若同时设了
padding，内容区进一步被压缩，文字可能完全不可见，但开发者工具里仍显示「尺寸正常」
为什么标准模式下不会出现这种错觉
标准模式（box-sizing: content-box）中，width 只管内容区，border 和 padding 是额外加上的：
-
width: 10px; border: 8px solid;→ 实际总宽 = 10 + 16 = 26px，不会溢出父容器（除非父容器太窄） - 内容区始终是 10px，哪怕 border 很大，也不会反向挤压内容
- 你看到的是「内容窄、边框厚」，而不是「边框把内容吃掉了」
如何快速验证是否踩中怪异模式 + width 冲突
打开 IE 或旧版 Edge 的开发者工具（F12），检查两个关键点：
- 右上角「文档模式」是否显示
Quirks—— 是，说明没或前面有空格/注释 - 选中异常元素，在「计算样式」里找
box-sizing值：若为content-box却表现得像border-box（总宽 ≈ width），基本可断定是怪异模式 - 临时加一句
* { box-sizing: border-box; }，如果错位消失，就是盒模型解释不一致导致的
修复时最容易漏掉的兼容细节
即使加了 并设了 box-sizing: border-box，以下三点仍可能导致 width
- IE8 不支持
inherit，所以不能靠父级设置box-sizing传递，必须显式写* { box-sizing: border-box; } - 伪元素（
::before/::after）默认仍是content-box，要一起重置：*, *::before, *::after { box-sizing: border-box; } - 某些 CMS 或框架注入的 XML 声明（如
）会强制 IE9+ 回退到怪异模式，需检查 HTML 源码第一行是否绝对干净
真正麻烦的不是 width 小于 border，而是它在怪异模式下不报错、不警告、DevTools 显示“一切正常”，却让内容凭空消失——这种静默失效，才是最该盯住的点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
