IE11及更早版本完全不解析var()，整条CSS声明被丢弃；必须通过PostCSS设preserve: false彻底移除var()语句，并确保插件顺序正确，仅:root定义的纯常量可安全降级。
var() 在 IE11 及更早版本中根本不会被解析，整条 CSS 声明直接被丢弃——不是“没生效”，而是“不存在”。所有 fallback 写法（如 color: var(--c, #333)）在 IE 下完全无效。
IE 不识别 var()，必须编译期彻底移除
PostCSS 的 postcss-custom-properties 默认行为是保留原始声明（preserve: true），只追加降级值，例如：
color: #007bff; color: var(--primary);
IE 看到第二行就跳过整条规则，最终取继承色（常为黑色或透明）。只有显式设 preserve: false 才会删掉含 var() 的行，只留静态值。
-
preserve: false是硬性要求，不写等于没配 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前，否则可能被覆盖 - 若同时用
css-vars-ponyfill，它依赖原始var()存在 → 此时必须配preserve: true，但 IE 下会双失效（PostCSS 没删，ponyfill 又因变量未定义而跳过）
:root + 纯常量是唯一安全组合
PostCSS 插件是编译期工具，无法处理运行时逻辑。能被降级的变量必须满足：
- 声明位置：必须在
:root（最稳妥），或通过@import明确引入的同一文件内；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：只能是纯常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，建议提至顶层
fallback 写法必须前置静态值，且不能用于复合属性
color: var(--text, #333) 在 IE 下毫无意义 —— 它连 var() 语法都不认识，整条声明被跳过。正确写法是：
立即学习“前端免费学习笔记（深入）”；
color: #333; color: var(--text-color, #333);
IE 用第一行，现代浏览器覆盖第二行。
- 复合属性如
background、border含var()时，IE 会丢弃整条声明（背景变transparent，边框消失） - 安全做法：拆成原子属性，例如：
background-color: #fff;+background-color: var(--bg, #fff);+background-image: url(...);
@supports 和条件注释在 IE11+ 已失效
@supports (background: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略，起不到降级作用。
IE10 起已完全禁用 <!--[if IE]>--> 条件注释；IE11 仅在废弃的“兼容性视图”下有限支持 —— 继续依赖等于主动放弃对 IE10+ 的可控适配。
真正能用的兜底手段只剩两样：X-UA-Compatible meta（仅影响文档模式，不解决 var()）和 PostCSS 编译期静态替换 —— 后者才是现代项目里唯一可靠路径。
