Bootstrap 4在IE11中Flexbox错乱源于其基于2012年草案的过时实现，需针对性降级：flex:1无效、align-items:center错位、gap不支持，必须手动添加-ms-前缀并避免flex-fill等依赖flex:1的类。
Bootstrap 4 在 IE11 中的 Flexbox 错乱不是“不支持”，而是它实现了过时的 2012 年 Flex 规范草案，和现代标准存在关键行为差异——直接写 display: flex 就会出问题，必须针对性降级。
IE11 的 flex 布局为什么错位？关键在 flex-shrink 和 align-items
IE11 把 flex: 1 解析成 flex: 1 1 0%，但实际执行时会忽略第二个参数（flex-shrink），导致子项无法收缩；align-items: center 在某些嵌套场景下也会错位，尤其当父容器高度未显式设定时。
- 避免使用
flex-fill、flex-grow-1这类依赖flex: 1的 Bootstrap 类 - 改用显式声明：
-ms-flex: 0 0 auto; flex: 0 0 auto;+width控制尺寸 - 对需要垂直居中的容器，加
min-height: 0防止内容溢出（Flexbug #2.1） - 慎用
align-items: stretch，IE11 对它的处理与标准不一致
Autoprefixer 不是万能解药：前缀必须生效且配置正确
Autoprefixer 只补前缀，不会修复引擎缺陷。但若连 -ms-flexbox 都没生成，说明构建流程根本没适配 IE11。
-
browserslist必须显式写"ie >= 11"，不能只靠"last 2 versions"（2026 年已不含 IE） - 检查输出 CSS 是否含
display: -ms-flexbox、-ms-flex-align: center等声明 - 若用 Webpack + PostCSS，确认
autoprefixer插件未被其他 loader 覆盖或禁用 - Bootstrap 4 官方构建产物本身已含 IE 前缀，自行重编译时务必复用其
browserslist配置
gap、flex-wrap、transform 等特性必须手动降级
IE11 完全不支持 gap，flex-wrap: wrap 在某些组合下失效，transform: translateZ(0) 可能被忽略导致 fixed 定位异常。
-
gap→ 改用margin模拟：.row { margin-left: -0.5rem; }+.col { padding-left: 0.5rem; } -
flex-wrap失效时，给子项加flex-basis或改用flex-flow: row nowrap避免换行逻辑 - 涉及
transform的组件（如 Collapse、Dropdown），禁用硬件加速相关声明，或用position: absolute替代transform动画 - 所有用到
height: auto过渡的地方（如 Accordion），必须换成max-height+ 固定像素值
真正麻烦的不是写多少降级代码，而是 IE11 对 flex 容器内子元素的盒模型计算方式和现代浏览器完全不同——哪怕 CSS 看起来一样，渲染结果也可能差一两个像素。这类问题往往只在特定嵌套层级暴露，必须用真实 IE11 环境逐层 inspect，不能只靠模拟器或 polyfill 库糊弄过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
