IE11默认content-box盒模型，必须全局设border-box并显式声明flex-basis；padding会干扰flex-basis计算，需预先扣除，且响应式断点须重写flex-basis值。
IE11 默认 box-sizing 是 content-box，必须显式设为 border-box
IE11 不像现代浏览器那样默认用 box-sizing: border-box，它沿用老式盒模型：width 只算内容区，padding 和 border 会额外加宽。结果就是你写 width: 100px; padding: 10px; border: 1px solid，实际占位是 122px——在响应式布局里极易撑破容器或触发横向滚动。
解决办法不是“局部修复”，而是全局重置：
- 所有元素统一加
box-sizing: border-box - 用
* { box-sizing: inherit }+html { box-sizing: border-box }确保继承链可靠（IE11 对通配符支持稳定） - 避免只给部分组件加，否则父子嵌套时计算逻辑错乱，尤其在 flex 子项中更明显
IE11 中 padding/border 影响 flex-basis 计算，必须配合显式 flex-basis
在 IE11 的 flex 容器里，如果子项只写 flex: 1 或 flex: 0 1 auto，它会把 padding 和 border 当作“可伸缩空间”的一部分参与计算，导致宽度失控。这不是渲染偏差，是引擎级行为差异。
正确做法是切断这种干扰：
立即学习“前端免费学习笔记（深入）”；
- 子项必须显式声明
flex-basis，例如flex: 0 0 33.333%，而非flex: 1 - 同时确保
box-sizing: border-box已生效，否则33.333%仍会被 padding 挤爆 - 若需响应式，每个断点都得重写
flex-basis，IE11 不会动态重算已渲染的值
IE11 不支持 calc() 在 flex-basis 中与百分比混用？其实支持，但有精度陷阱
IE11 支持 flex-basis: calc(33.333% - 20px)，但小数位数过多（如 33.333333%）会导致截断为 0，最终子项宽度塌陷。这不是语法不识别，而是内部浮点计算精度不足。
安全写法：
- 百分比保留最多三位小数：
33.333%可行，33.3333%就可能出问题 - 避免在 calc() 里嵌套多层运算，比如
calc((100% / 3) - 20px)—— IE11 不解析除法 - 如果用 Autoprefixer，确认它没把
calc()错误转义成 IE 不兼容格式（某些旧版插件会加-ms-前缀，反而破坏语法）
IE11 下 width: 100% + padding 导致 overflow，不能靠 overflow: hidden 治标
当父容器设了 width: 100%、子项又用了 padding 且未设 box-sizing: border-box，IE11 会严格按 content-box 渲染，超出父容器的部分不会被 overflow: hidden 截断——因为溢出发生在布局阶段，不是渲染后裁剪。
真正有效的控制点只有两个：
- 要么在子项上补
box-sizing: border-box（推荐） - 要么用
max-width: calc(100% - 20px)显式预留 padding 空间（仅限固定 padding 场景） - 别依赖
overflow: hidden或transform: translateZ(0)强制硬件加速来“掩盖”，它们在 IE11 中对布局溢出无效
IE11 的盒模型问题从来不是孤立存在的，它总和 flex、百分比、calc()、甚至 min-height 交织在一起。最常被忽略的是：哪怕你写了 box-sizing: border-box，如果父容器本身没设明确 width 或 height，IE11 仍可能回退到 content-box 行为——因为它需要一个确定的参考尺寸才能启动 border-box 计算。
