必须为每个var()声明提供静态兜底值并定义在:root中，否则IE11会静默丢弃整条CSS声明；正确写法是先写静态值、再写var()覆盖，且简写属性需拆解为原子属性分别添加fallback。
不能只写 var(--x)，必须每处都补上逗号后的静态值，且所有变量定义得塞进 :root —— 否则旧浏览器连 fallback 都看不到。
为什么 color: var(--text-color) 在 IE11 里直接失效
IE11 遇到 var() 语法不是“降级”，是整条声明静默丢弃。比如：background: var(--bg); color: #333;，结果只有 color 生效，background 彻底消失，页面可能白屏或错位。
- 它不解析
var()函数，也不读括号里的内容，更不会尝试 fallback -
var(--x, #000)的第二个参数只在变量未定义时生效，对 IE11 无效 —— 因为 IE 根本不认这个函数，整行 CSS 被跳过 - 所以光靠
var()自带 fallback 不解决“浏览器不认识语法”这层问题
怎么写才让 IE11 和现代浏览器都拿到可用值
必须用“无条件兜底 + var() 覆盖”的组合写法，且严格保持顺序：
- 第一行写纯静态值：
background-color: #007bff; - 第二行紧跟着写带 fallback 的
var()：background-color: var(--primary, #007bff); - 两行必须在同一选择器块内，不能拆到不同规则或文件里
- 变量名如
--gap带单位（12px），fallback 值也必须带单位（12px，不能只写12）
这样 IE11 只认第一行，现代浏览器优先用第二行（且变量未定义时自动回退到 #007bff）。
立即学习“前端免费学习笔记（深入）”；
哪些属性必须拆解成原子声明再加 fallback
像 background、border、font 这类简写属性，不能只给整条加 var() fallback，否则旧浏览器会因语法不合法而整条丢弃。
- 错误示例：
background: var(--card-bg, #fff);→ IE11 看到var()就跳过，背景变透明 - 正确做法：拆成
background-color、background-image等原子属性，每条单独加 fallback - 同理，
border: var(--border-style) var(--border-width) var(--border-color)必须拆成border-style、border-width、border-color三行，每行都带静态值
为什么 :root 是唯一安全的变量定义位置
旧浏览器 fallback 机制依赖 CSS 解析顺序和作用域可见性。:root 是全局作用域起点，也是构建工具（如 PostCSS）默认扫描范围。
- 如果把
--color定义在.card { --color: red; }里，IE11 仍无法从.card p { color: var(--color); }中取到任何值 —— 因为它连var()都不认，更别说局部作用域了 - 分散在多个组件选择器里的变量，后期维护难对齐，手写 fallback 极易漏项
- 所有变量集中写在
:root，既方便人眼检查，也利于自动化脚本批量注入 fallback
手动 fallback 看似原始，但它是唯一不依赖构建流程、不引入运行时 JS、且在任意环境（包括内网离线系统、老安卓 WebView）都稳如磐石的方式 —— 唯一代价是，你得真的一行不落地写完所有 var() 调用点。漏掉任意一处，那一处就在 IE11 里彻底消失。
