ie11对var(--x)是整条css声明静默丢弃，非降级而是失效；必须前置静态值、后置var()覆盖，postcss需设preserve:false静态替换，变量须定义在:root且为纯常量。
IE11 对 var(--x) 的处理不是“不生效”，而是整条 CSS 声明被静默丢弃——.btn { color: var(--primary); } 在 IE11 里等同于 .btn { }，样式彻底消失，且无报错、无警告、无 fallback 回退。
IE11 为什么连 var(--x, #fff) 都不认
这不是后备值写得不够好，是语法层被拒：IE11 根本不认识 var() 这个函数，括号内无论写什么（包括逗号和默认值），整条声明都会被 parser 跳过。它不会尝试解析，也不会降级到第二个参数。
-
color: #333; color: var(--text, #333);✅ —— IE 用第一行，现代浏览器覆盖第二行 -
color: var(--text, #333);❌ —— IE 当成空声明，取继承色（常为黑色） -
background: #fff url(img.png); background: var(--bg, #fff) url(img.png);❌ —— 复合属性含var()，IE 整条丢弃，背景变transparent
postcss-custom-properties 必须设 preserve: false
默认配置下插件只做“追加”，比如把 color: var(--c) 编译成 color: #007bff; color: var(--c);。IE 看到第二行就跳过，结果还是回退到初始值。
- 必须显式设
preserve: false，插件才会删掉var()，只留color: #007bff; - 漏配或写成
preserve: true，构建后 CSS 里仍有var(--x)，IE 依旧白屏 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前
哪些变量能被 PostCSS 安全降级
插件只处理构建时静态可求值的定义，动态、跨文件、嵌套表达式一律跳过。
- ✅ 定义必须在
:root（最稳妥），或通过@import明确引入的同一文件内 - ✅ 值只能是纯常量：
--color: red;、--gap: 12px; - ❌
--size: calc(1rem + 2px);、--c: var(--base);、--bg: linear-gradient();全部无法替换 - ❌
width: calc(100% - var(--gap));—— IE 直接跳过整个calc()，PostCSS 默认也不处理这种嵌套
运行时兜底必须用 no-cssvars 类，别信 @supports
@supports (background: var(--x)) 在 IE11 里本身不被识别，会直接忽略整条规则，起不到任何降级作用。
- JS 检测必须用
CSS.supports('color', 'var(--t)')（传完整声明），不能只传'--t'（IE 报TypeError） - 检测后给
加no-cssvars类，再写.no-cssvars .btn { background: #007bff; } - 如果用了
css-vars-ponyfill，它必须等document.styleSheets加载完成后再执行
真正容易被忽略的是：变量定义位置、preserve 配置开关、以及 calc() 和媒体查询中对 var() 的硬性禁止——这些不是“兼容性问题”，而是 IE11 解析器的底层限制，绕不开，只能规避。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
