Bootstrap 5下拉菜单在IE11无法运行，报cssVars() --bs变量未定义错误

问题根本原因 #

Bootstrap 5 官方已终止对 IE 11 的支持，其核心样式与组件大量使用了 IE 11 无法原生识别的 CSS 自定义属性（即你报错中--开头的变量），你看到的cssVars()相关报错，是负责兼容CSS变量的polyfill未正确检测到Bootstrap预设变量导致的。

可行解决方案 #

方案1：降级使用 Bootstrap 4（推荐） #

Bootstrap 4 完整支持 IE 11，包括下拉菜单在内的所有原生组件不需要额外适配即可正常运行，是兼容成本最低的方案。

方案2：手动配置polyfill适配Bootstrap 5 #

如果必须使用Bootstrap 5，可按以下步骤配置兼容：

• 引入css-vars-ponyfill作为CSS变量兼容垫片，注意需要在Bootstrap CSS加载完成后再初始化polyfill
• 全局提前声明所有Bootstrap 5用到的CSS自定义属性默认值，你报错中提到的几个变量可参考以下预设：

:root {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --bs-table-bg: transparent;
  --bs-table-striped-color: #212529;
  /* 其他用到的Bootstrap自定义属性也需要在此补全默认值 */
}

• 额外引入Bootstrap 5针对IE11的JS兼容补丁，按顺序加载依赖：先加载所有polyfill，再加载Bootstrap JS文件

注意事项 #

即使完成所有polyfill配置，Bootstrap 5的部分样式和交互在IE11中依然可能出现异常，生产环境如需稳定兼容IE11，优先选择降级到Bootstrap 4。

内容的提问来源于stack exchange，提问作者user16757692