为什么CSS2盒模型在IE兼容模式下宽度异常-css教程-PHP中文网

ie6–8怪异模式下width包含padding和border，标准浏览器仅指content区；必须添加并全局设置, ::before, *::after { box-sizing: border-box; }统一盒模型。

为什么css2盒模型在ie兼容模式下宽度异常

IE6–8 的怪异模式把 width 当作“内容 + padding + border”的总宽，而标准浏览器（包括 IE9+）默认只把 width 算作内容区宽度——这不是 bug，是渲染引擎根本没对齐。不加 或盒模型重置，同一段 CSS 在不同 IE 版本里必然错位。

怎么确认自己掉进了怪异模式

打开 IE 开发者工具（F12），右上角“文档模式”显示 Quirks 就是它。哪怕只在 HTML 开头多一个空格或 XML 声明（如 <?xml version="1.0"?>），IE 也会强制降级。CMS 输出的 HTML、内嵌 <iframe></iframe> 页面也常偷偷触发这个模式。

为什么只写 `* { box-sizing: border-box; }` 还不够

这个写法漏掉了伪元素，而 ::before 和 ::after 在 IE9+ 和 Firefox 中仍按 content-box 计算，导致用伪元素画边框、箭头时位置偏移。表单控件（如 <input type="text">）在 IE 中也常因未覆盖而撑宽。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

正确写法必须包含伪元素：*, *::before, *::after { box-sizing: border-box; }
IE8 支持 border-box，但不支持 inherit，所以不能靠父级继承，必须显式通配
第三方库（如 Bootstrap 3）没默认启用该重置，混用时要手动补全

Flex/Grid 容器里子项仍错位的真相

即使全局设了 box-sizing: border-box，IE11 对 display: flex 的实现有遗留缺陷：子项若没显式声明 display: block（比如用的是默认 inline 的 <span></span>），它的盒模型行为会回退到 content-box，哪怕 CSS 已重置。

Flex 子项必须显式写 display: block 或 flex-basis: 0 + flex-grow: 1，否则 padding 仍会额外撑开
Grid 子项同理，grid-template-columns 定义的是轨道大小，但子项是否溢出，取决于它自己的 box-sizing
gap 能绕过 padding/border 撑宽问题，但 IE 全系不支持，老项目得降级处理

最易被忽略的一点：盒模型统一只是基础，margin 始终不参与计算，但它在不同浏览器中默认值差异极大（比如 <ul></ul> 的 margin），光调 box-sizing 解决不了列表错位——得连 margin 和 display 类型一起控。