ie11及更早版本完全不解析var(--x)语法，整条声明被静默丢弃，fallback值无效；必须用postcss设preserve:false静态替换，变量须定义在:root且为静态常量，calc()内嵌var()需手动拆解，兜底推荐no-cssvars类。
IE11 及更早版本根本不解析 var(--x)，连 fallback 都不走——你写的 color: var(--text, #333); 在 IE 里整行被静默丢弃，最终取继承色或 initial（比如透明背景、黑色文字）。真能用的 fallback 只有编译时静态替换或同一行内逗号分隔的原生回退。
为什么 var(--x, #333) 在 IE 里经常失效
这不是写法错，是 IE 的 parser 根本不认识 var() 函数。它看到 color: var(--text, #333); 这整条声明，直接跳过，不会尝试提取第二个参数。只有当这行 CSS 被 PostCSS 处理成 color: #333;，或你手动写成两行且兼容值在前，才真正生效。
- 写成两行但顺序反了：
color: var(--text, #333);→ IE 跳过，再没下文 - 写成两行且兼容值在前：
color: #333;紧接着color: var(--text, #333);→ IE 取第一行，现代浏览器覆盖为变量值 - 变量已定义为空字符串：
:root { --text: ""; }→var(--text, #333)不触发回退，因为“已定义”
PostCSS 替换必须设 preserve: false
默认配置下 postcss-custom-properties 只追加降级值，变成 color: #333; color: var(--text);。IE 看到第二行就停，结果还是取 initial 或继承值。只有 preserve: false 才会删掉 var()，只留 color: #333;。
- Webpack/Vite 中插件顺序必须在
autoprefixer之前，否则可能被干扰 - 变量必须定义在
:root，且值为静态常量：--text: #333;✅，--size: calc(1rem + 2px);❌ - 如果同时用了
css-vars-ponyfill，就不能开preserve: false，否则 ponyfill 找不到原始var()无法运行时注入
calc() 里套 var() 在 IE 完全不可用
width: calc(100% - var(--gap)); 这种写法在 IE11 不是“变量没生效”，而是整个 calc() 表达式被 parser 直接跳过——连数值都不算。PostCSS 插件默认也不处理这种嵌套，因为它无法安全求值。
- 稳妥做法：把
--gap: 12px这种纯数值变量，直接写成width: calc(100% - 12px); - 别指望
postcss-calc和postcss-custom-properties链式协作——顺序错或漏配，结果仍是空值 - 如果
--gap需动态变化，就得 JS 注入style属性，或明确放弃 IE11 支持
兜底 class 比 @supports 更可靠
@supports (background: var(--x)) 在 IE11 里会直接报 TypeError，因为它根本不认识 @supports 规则语法。靠它做条件加载，JS 都还没执行就崩了。
- 真正可用的兜底是手动加 class：
，然后写.no-cssvars .btn { background: #007bff; } - 这个 class 可以用 JS 检测后添加，也可以服务端根据 UA 注入，比 CSS 层的条件判断更可控
- 不要把 fallback 拆到不同媒体查询或不同 class 里——IE 不认
@supports，也不支持基于变量的响应式逻辑
最关键的细节：所有降级都依赖“变量定义可被构建工具静态读取”。JS 动态设置的 --color、跨文件未 @import 的变量、局部作用域如 .card { --pad: 1rem; }，PostCSS 一律看不见。想让它工作，就得收口到 :root，写死值，且确保在使用前声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
