bootstrap 5 不支持 ie11，因其依赖 css 变量、标准 flex、intersectionobserver 等 ie11 完全缺失的原生能力，且无可靠 polyfill 可补全，官方自 alpha 版起已移除所有兼容逻辑。
Bootstrap 5 不支持 IE11，不是兼容性“没做好”，而是 IE11 根本不具备运行它的基础能力——CSS 变量、标准 Flex、IntersectionObserver 这些不是“可选功能”，是 Bootstrap 5 的骨架。
IE11 遇到 var(--bs-primary) 就静默跳过整条 CSS 声明
CSS 自定义属性（--bs-primary、--bs-gap 等）是 Bootstrap 5 主题系统和栅格间距的唯一来源。IE11 完全不解析 var() 函数，连语法识别都失败，更不会回退到前一条声明。
- 即使你写成
color: #212529; color: var(--bs-body-color);，IE11 仍会忽略第二条，但第一条有效——所以降级必须显式写出，不能依赖“后备值”自动生效 -
calc(var(--bs-gap) * 2)这类动态计算在 IE11 中直接被丢弃，结果是 margin 或 padding 归零 - 检查方式：在 IE11 F12 开发者工具中选中元素 → “计算样式”里搜
color或margin，若值为空或显示初始值（如0px），大概率就是变量失效
display: flex 在 IE11 里不是“不完美”，而是行为不可预测
Bootstrap 5 的 .row、.col、.d-flex 全部基于标准 Flexbox 规范，而 IE11 实现的是 2012 年旧草案（display: -ms-flexbox），存在大量已知渲染缺陷：
-
flex: 1简写被完全忽略，导致flex-fill类无效；需改用flex: 0 0 auto+ 显式width -
flex-wrap: wrap在嵌套容器中常失效，列强行挤在一行，溢出容器 -
gap属性 IE11 零支持，.g-3不起作用；必须手动给.row加margin-left: -0.5rem，给.col加padding-left: 0.5rem -
align-items: stretch在某些父子结构下不拉高子元素，卡片高度不一致
data-bs-toggle="modal" 在 IE11 里根本不会触发 JS 逻辑
Bootstrap 5 的 JS 组件不再依赖 jQuery，而是直接调用 Element.classList、CustomEvent、Promise 和 IntersectionObserver。IE11 缺失这些 API，且无法靠 polyfill 补全执行模型差异：
-
bootstrap.bundle.min.js含大量?.（可选链）、??（空值合并）、const、class语法，IE11 加载即报SyntaxError，脚本中断 -
Modal.show()内部调用getComputedStyle()获取过渡状态，IE11 返回值格式与现代浏览器不同，导致判断逻辑错乱 - 即使你引入
core-js，也无法修复document.createElement('div').attachShadow（Tooltip 隔离渲染所用）——IE11 根本不识别该方法 - 声明式交互（如
data-bs-toggle）依赖事件委托链和 DOM 就绪时机，IE11 的触发顺序与现代浏览器不同，结果是点击无响应、控制台无报错、调试器进不去断点
别试 css-vars-ponyfill 或 webcomponents.js 了
这些工具解决的是特定场景下的语法降级或组件封装问题，但 Bootstrap 5 的运行时依赖是系统性的。强行注入只会掩盖问题，让失败更隐蔽：
-
css-vars-ponyfill只能处理静态变量，对calc(var(--x) + 1px)这类动态表达式无能为力 -
webcomponents.js专注 Custom Elements 和 Shadow DOM，与 Bootstrap 5 的 Dropdown、Toast 完全无关，也救不了Dropdown.show()静默失败 - 官方源码从 Alpha 版起就删掉了所有
if (isIE) { }分支，没有 fallback 路径可走；你加的 polyfill 只是在往一个没接口的黑盒里塞数据 - 最危险的错觉是：页面“看起来能用”——一旦用户点击、滚动、缩放，JS 交互链断裂，表单验证不触发、下拉菜单不展开、手风琴不折叠，问题集中爆发
真正容易被忽略的点是：即使你用 Babel 转译了自己的业务代码，bootstrap.bundle.min.js 是压缩后产物，含内联函数和动态 eval，转译会破坏逻辑；而替换为未压缩版（bootstrap.js）又引入更多 ES6+ 语法，反而更难兼容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
