ie6–8怪异模式下width包含padding和border，而标准浏览器仅指content区域，导致同一css在不同浏览器中总宽度不一致；必须添加并全局设置*, *::before, *::after { box-sizing: border-box; }统一盒模型。
IE6–8 默认用怪异模式，width 包含 padding 和 border
IE6–8 在没有正确 DOCTYPE 声明时会触发“怪异模式（Quirks Mode）”，此时它把 width 解释为元素总宽（content + padding + border），而标准浏览器（Chrome/Firefox/Safari/IE9+）默认用“标准模式（Standards Mode）”，width 仅指 content 区域。这种底层解释差异，不是 bug，而是渲染引擎根本没对齐。
常见现象：width: 200px; padding: 10px; border: 1px solid 的元素，在 IE6 怪异模式下占满 200px；在 Chrome 下实际占 222px，导致父容器溢出、栅格错位、flex 子项换行异常。
- 验证方式：打开 IE 开发者工具（F12），看右上角“文档模式”是否显示 “Quirks” —— 是就确认踩中了
- 修复前提：必须加
，且放在文件第一行，任何空格或注释都会退化为怪异模式 - 注意：即使加了
DOCTYPE，某些内联框架（<iframe></iframe>）或旧 CMS 输出的 HTML 可能仍带 XML 声明，也会强制降级
IE9+ 标准模式下仍可能错位，因 box-sizing 未全局统一
IE9+ 支持 box-sizing: border-box，但默认仍是 content-box。如果你只给部分元素设了 box-sizing: border-box（比如只写了 .card { box-sizing: border-box; }），而没覆盖 *::before 和 *::after，那么伪元素仍按 content-box 计算，造成布局微偏——尤其在用伪元素做装饰边框或三角箭头时明显。
典型错误写法：* { box-sizing: border-box; } —— 这漏掉了伪元素，IE9+ 和 Firefox 都会因此出现不一致。
- 正确写法必须包含伪元素：
*, *::before, *::after { box-sizing: border-box; } - IE8 支持
border-box，但不支持inherit，所以不能靠父级继承，必须显式通配 - 第三方库（如 Bootstrap 3）没默认启用该重置，若混用需手动补全，否则表单控件（
input[type="text"]）在 IE 中依然撑宽
IE11 渲染 flex 布局时盒模型行为受 display 属性干扰
IE11 对 display: flex 的实现有遗留缺陷：当子元素是 display: inline-block 或未显式声明 display: block 时，IE11 会错误地将它的 box-sizing 行为回退到 content-box，哪怕全局已重置。这在用 flex 做按钮组、标签页时高频出现。
例如：<div class="tabs">
<span>Tab1</span><span>Tab2</span>
</div>，CSS 设了 .tabs { display: flex; }，但 span 默认是 inline 元素，IE11 就不把它当 flex item 处理，padding 仍会撑开宽度。
- 强制转块级：
.tabs > *或更稳妥地.tabs > span { display: block; } - 避免依赖隐式 display：所有 flex 直接子元素都应显式设
display: block或display: flex - 不要用
display: -ms-flexbox旧前缀替代标准写法——IE11 已原生支持display: flex，前缀反而可能触发兼容模式降级
调试时别信“看起来一样”，要查 computed style 的实际值
开发者工具里看到的“尺寸”未必反映真实渲染逻辑。IE11 的“计算样式（Computed）”面板有时会把 width 显示成 content 宽度，但 layout 面板里的实际 border-box 宽度才是它真正占的空间——这两个值在 IE 中经常不一致。
最容易被忽略的点：IE 对 calc() 内的百分比计算精度极低，width: calc(50% - 1px) 在 IE11 中可能四舍五入成整数，导致两列总宽 ≠ 100%，最后一列掉行。
- 查真值：在 IE11 F12 工具中，切到 “Layout” 标签页，展开 “Box Model”，直接看 “Total Width” 数字
- 避免嵌套 calc：
calc(calc(100% / 3) - 2px)在 IE 中大概率失效，改用单层calc(33.333% - 2px)并留 0.1% 余量 - 伪元素的
content若为空字符串（""），IE11 仍可能分配不可见宽度，建议统一设font-size: 0; line-height: 0;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
