ie11完全不解析css自定义属性，var()函数整条声明被静默丢弃，后备值无效；必须采用“静态值+var()覆盖”的双声明顺序写法，并在构建阶段用postcss降级处理。
CSS自定义属性在IE11中根本不会被解析，var(--x)整条CSS声明会被静默丢弃——不是“没生效”，是浏览器直接跳过，连后备值var(--x, #fff)都无效。
为什么var(--x, #fff)在IE11里完全不起作用
IE11的CSS解析器不认识var()这个函数语法，遇到color: var(--text, #333)时，不是取逗号后的#333，而是整条声明作废，退回到继承值或属性初始值（比如color变成黑色）。这和现代浏览器的行为完全不同。
- 后备值机制只在支持CSS变量语法的浏览器中触发（Chrome 49+、Firefox 31+、Safari 9.1+）
-
var(--a, var(--b, #000))这类嵌套写法在IE里也无效，它连最外层的var()都不认 - 不能依赖
@supports (color: var(--x))做降级开关——IE11本身不支持@supports，整条规则会被忽略
必须把静态值写在var()前面
IE能读的是你明明白白写的值，不是靠函数兜底。正确写法只有一种：同一行内，先写静态值，再写var()覆盖。
button {
background: #007bff; /* IE和所有浏览器都执行这一行 */
background: var(--primary, #007bff); /* 支持变量的浏览器会覆盖上一行 */
}
- 顺序不能颠倒：后声明的同优先级样式会覆盖前声明的
- 不能换行写成两行独立声明，否则IE会取第二行的无效
var()并回退到初始值 - 如果用SCSS生成这类代码，确保编译后仍是单行双声明，而不是分段输出
构建时用PostCSS降级，别指望运行时polyfill
css-vars-ponyfill在IE11里容易失效，不是它不好，而是默认配置和执行时机踩了三个坑：只处理:root下变量、执行太早、没开watch。真正稳定的做法是在构建阶段就抹掉var()。
- 用
postcss-custom-properties插件，且必须设preserve: false——否则会生成color: #333; color: var(--c);，IE看到第二行就跳过整条规则 - 变量定义只能在
:root里，且值必须是纯静态常量，比如--gap: 16px;✅，--size: calc(1rem + 2px);❌ -
calc(100% - var(--gap))这种写法PostCSS默认不处理，IE的calc()解析器会直接丢弃整条声明，必须手动拆解为calc(100% - 16px)
JS检测比@supports更可靠
想动态启用主题或切换变量？别用CSS.supports('--x')，IE里会报TypeError；也别信@supports (color: var(--x))，IE根本不认这个规则。
- 用
if (window.CSS && CSS.supports('color', 'var(--x)'))，传完整声明字符串才安全 - 更简单直接的方式：给
加no-cssvars类，通过JS检测后移除，然后用CSS选择器html.no-cssvars .btn { color: #333; }写降级样式 - 动态修改变量时，如果真要用
css-vars-ponyfill，必须等document.styleSheets加载完毕后再调用，并设watch: true，否则document.documentElement.style.setProperty('--x', 'red')不会触发重绘
最关键的细节往往藏在最浅的地方：IE11不解析var()，不代表它不能工作——只是你得把“它能读懂的”放在它最先看到的位置，而不是指望它理解新语法。降级不是让旧浏览器学新东西，是提前把答案写好，让它照着抄。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
