IE11及更早版本不解析var()语法，整条CSS声明被静默丢弃；修复需用postcss-custom-properties设preserve: false彻底移除var()，并确保变量定义在:root且为纯常量。
IE11 及更早版本根本不会解析 var(--x) 语法，整条 CSS 声明被静默丢弃——不是 fallback 没触发，而是那行 CSS 压根没进渲染流水线。修复必须让最终产出的 CSS 文件里彻底没有 var() 函数调用。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只做“追加”，例如把 color: var(--primary); 编译成：
color: #007bff; color: var(--primary);
IE 看到第二行直接跳过，结果取继承色或 initial（背景变透明、文字常为黑色）。只有显式设 preserve: false，插件才会删掉含 var() 的行，只留静态值。
-
preserve: true或不写 → 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前，否则可能被覆盖 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时必须配preserve: true，但 IE 下会双失效——PostCSS 没删掉var()，ponyfill 又因变量未定义而跳过
变量必须定义在 :root 且值为纯常量
postcss-custom-properties 是构建期静态分析工具，只能处理它“看得见、算得清”的定义：
立即学习“前端免费学习笔记（深入）”；
- 声明位置：必须在
:root（最稳妥），或通过@import明确引入的同一文件内；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：只能是纯常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，建议提至顶层 - JS 动态设置的变量（
document.documentElement.style.setProperty('--color', 'red')）完全不可见，插件无从下手
color: #333; color: var(--text, #333); 写法无效
很多人误以为 color: var(--text, #333); 能兜底 IE，其实 IE 连 var() 语法都不认识，整条声明被跳过，结果仍是继承值。正确写法必须前置静态值：
- ✅
color: #333; color: var(--text-color, #333);—— IE 用第一行，现代浏览器覆盖第二行 - ❌
color: var(--text, #333);—— IE 当成空声明，取继承色（常为黑色） - 复合属性如
background、border含var()时，IE 会丢弃整条声明（背景变transparent，边框消失） - 安全做法：拆成原子属性，例如
background-color: #fff; background-color: var(--bg, #fff);+background-image: url();
别信 @supports (background: var(--x))
@supports (background: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略，起不到降级作用。真正可靠的运行时兜底是手动加 class：
- 用
CSS.supports('color', 'var(--t)')检测（不能只传'--t'，IE 报TypeError） <script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script>- CSS 中写：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } - 构建后务必人工检查产出 CSS：全局搜索
var(--，若有残留，说明变量定义位置不对、值含动态表达式，或插件根本没生效
