bootstrap 5 不支持 ie（含 ie11），因其依赖的 css 自定义属性、标准 flex/grid、intersectionobserver 等原生能力在 ie 中完全缺失且无法通过 polyfill 可靠补全，官方自 alpha 版起已移除所有兼容逻辑。
Bootstrap 5 不支持 IE（包括 IE11），不是因为“懒得兼容”，而是它依赖的 CSS 和 JS 原生能力在 IE 中根本不存在，且无法通过 polyfill 可靠补全。
CSS 自定义属性（--bs-primary）在 IE 中完全无效
Bootstrap 5 的所有主题色、断点、间距、圆角、阴影都基于 root 级 CSS 变量，例如 --bs-body-color、--bs-border-radius-lg。组件样式大量使用 var(--bs-xxx)，而 IE 对 var() 的解析结果始终为空字符串——按钮没背景、卡片没边框、表格线消失，都是这个原因。
常见错误现象：
-
button.btn-primary渲染成无背景、无文字色的“透明按钮” - 自定义 Sass 变量覆盖（如
$primary: #007bff）在 Bootstrap 5 中已失效，因底层逻辑已切换为 CSS 变量驱动 - PostCSS 插件（如
postcss-custom-properties）只能处理静态值，无法还原calc(var(--bs-gap) * 2)这类动态计算
flexbox 和 grid 的 IE 实现存在不可修复的渲染缺陷
Bootstrap 5 的栅格系统、卡片布局、表单排列全部基于标准 display: flex 和 display: grid。IE 的 flex 实现有数十个已知 bug，比如：
-
flex-wrap: wrap在嵌套容器中随机失效 -
min-width在 flex 项中被忽略，导致列宽塌陷 -
justify-content: space-between在某些断点下错位一像素，且无法用 margin 修正
这些不是样式微调问题，而是渲染引擎级缺陷。即使你手动加 display: -ms-flexbox，也无法让 .row > .col 在 IE 中行为与现代浏览器一致。
IntersectionObserver 和 ResizeObserver 是 JS 组件运行的前提
Bootstrap 5 的 Dropdown、Offcanvas、Toast 都依赖这两个 API 判断显示/隐藏时机。IE 中它们根本未定义，且没有轻量、准确的 polyfill：
-
core-js只能模拟IntersectionObserver的回调触发，但无法复现其与滚动性能、视口计算的精确耦合 -
webcomponents.js不提供ResizeObserver，它的 polyfill（如resize-observer-polyfill）在 IE 中触发频率极低，导致下拉菜单“点了没反应”或“关不掉” -
bootstrap.bundle.min.js中一旦执行到new IntersectionObserver(...)，IE 直接抛ReferenceError并中断后续脚本
为什么加 core-js + css-vars-ponyfill 仍会静默失败
有人试过全套 polyfill，结果是样式部分恢复、JS 交互全挂。根本原因是：IE 和现代浏览器的执行模型差异太大。
-
data-bs-toggle="modal"这类声明式交互依赖事件委托链和 DOM 就绪时机判断，IE 中document.addEventListener('click', ...)的捕获顺序、冒泡行为与现代浏览器不同 -
getComputedStyle()返回值格式不一致，导致 Modal 内部过渡检测永远返回'none' -
Element.closest()、Promise、可选链（?.）等语法在 IE 中直接报SyntaxError，脚本甚至加载不成功
真正容易被忽略的点是：即使你把 CSS 变量“骗”进 IE，JS 组件也大概率不会初始化——因为 Bootstrap 5 的 JS 源码里早已删光所有 if (isIE) 分支，连 fallback 路径都没留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
