Bootstrap CSS 不自动降级，IE11 因不识别 var() 语法会静默丢弃整条声明，必须为每个变量使用显式 fallback：先写静态值（如 color: #000;），再写 var(--x, #000);，且所有变量定义统一置于 :root。
Bootstrap CSS 本身不自动降级，所有降级行为必须由你显式控制；没写 fallback 就等于在 IE11 或禁 JS 环境里“主动放弃样式”。
为什么 var(--bs-primary) 在 IE11 里直接失效
IE11 不识别 var() 语法，整条 CSS 声明会被静默丢弃，不是“用默认值”，而是彻底跳过。比如：color: var(--bs-primary); → IE11 中该元素文字变成 inherit 或浏览器默认色（常为黑色或透明），布局可能错乱。
-
var(--x, #000)的 fallback 参数对 IE11 无效——它连函数名都不认，更不会解析括号内容 - 简写属性如
background、border、font不能直接套var()，否则整条被丢，必须拆成原子属性逐个加 fallback - 变量定义必须全部放在
:root，局部作用域（如.card { --c: red; }）在旧浏览器中完全不可见
正确写 fallback 的三步硬规则
每处使用 CSS 变量的地方，都得按这个顺序写，缺一不可：
- 第一行：纯静态值，带单位、带颜色、可直接运行，例如
background-color: #fff; - 第二行：紧跟着写
background-color: var(--bs-body-bg, #fff);，逗号后是同一值的重复，确保变量未定义时现代浏览器也能兜底 - 所有变量声明统一收口在
:root，例如：:root { --bs-body-bg: #fff; --bs-primary: #0d6efd; --bs-gap: 1rem; }
哪些地方最容易漏 fallback
这些是实际项目中最常出问题的点，一漏就导致白屏、错位或不可读：
立即学习“前端免费学习笔记（深入）”；
-
font-size: var(--bs-body-font-size);→ 必须补font-size: 1rem;在前，且单位一致（不能写1） -
padding: var(--bs-gutter-x);是简写，要拆成padding-left和padding-right两行，各自带 fallback - 自定义工具类（如
.my-card）里用了border-radius: var(--bs-border-radius);？同样要前置border-radius: 0.375rem; - 如果你覆盖了 Bootstrap 的 Sass 变量（如改了
$spacers），生成的 utility 类（如mb-4）CSS 也得同步注入 fallback，否则 IE11 里间距全归零
最麻烦的不是写 fallback，而是维护一致性——只要有一处漏了 var() 前的静态值，那个样式在 IE11 里就彻底消失，还查不出报错。建议把所有变量定义和 fallback 规则集中管理，别散落在多个 SCSS 文件里。
