ie 11 完全不支持 css 自定义属性，会静默丢弃所有含 var(--x) 的声明；必须通过 postcss（preserve: false）在构建时彻底移除 var()，且变量须定义在 :root、值为纯静态常量，calc() 中也不能含 var() 或空格。
IE 11 不是“不生效”，而是把所有含 var(--x) 的 CSS 声明整条静默丢弃——color: var(--text); 在 IE 里等同于没写这行，文字回退到继承色（常为黑色），背景变透明，布局可能直接塌陷。兼容必须让最终 CSS 文件里彻底没有 var()，且不能依赖任何括号内 fallback。
postcss-custom-properties 必须设 preserve: false
这是最常踩的坑：插件默认只追加降级值，不删除原声明。比如输入 color: var(--c);，默认输出：
color: #007bff; color: var(--c);
IE 看到第二行就跳过整条规则，最终取 color 初始值（黑色）。只有显式配置 preserve: false，才会只留下第一行。
-
preserve: true或不配 → 构建后仍有var(--x)→ IE 失效 - Webpack/Vite 中，该插件必须放在
autoprefixer之前，否则可能被覆盖 - 检查构建产物 CSS 文件，全局搜索
var(—— 只要还有残留，说明变量定义跨文件、值含calc()、或 JS 动态注入
变量必须定义在 :root 且值为纯静态常量
PostCSS 插件是编译期工具，无法处理运行时逻辑。它只认同一文件内、:root 下定义的纯字符串或数字值。
- ✅ 正确：
:root { --primary: #007bff; --gap: 8px; } - ❌ 错误：
.card { --pad: 1rem; }（局部作用域不处理） - ❌ 错误：
--size: calc(1rem + 2px);、--c: var(--base);、--bg: linear-gradient();（含函数或表达式，跳过） - 媒体查询内定义变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，应提至顶层:root
calc() 里用 var() 在 IE 11 是双重失效
即使你用 css-vars-ponyfill 把 var(--gap) 替换成 16px，生成的 calc(100% - 16px) 仍会被 IE 拒绝——它对 calc() 支持极弱，只接受无空格、无单位混合的极简格式（如 calc(100%-16px)）。
- ❌ 避免：
width: calc(100% - var(--gap));、@media (min-width: var(--sm)) - ✅ 安全做法：构建时用 PostCSS 展开，或手动写成
width: calc(100% - 8px); - JS 动态设置变量后（如
el.style.setProperty('--gap', '16px')），需手动调用cssVars({ variables: { '--gap': '16px' } })，且watch: false才可靠（IE 不支持DOMSubtreeModified）
兜底必须用 no-cssvars 类，别信 @supports
@supports (color: var(--x)) 在 IE 11 中本身不被识别，整条规则被忽略，起不到任何降级作用。
- JS 检测必须用
CSS.supports('color', 'var(--_)')（传完整声明字符串），不能只传'--theme' - 检测失败后给
加no-cssvars类，再写两套样式：.btn { background: var(--primary); }和.no-cssvars .btn { background: #007bff; } - 复合属性（如
background）不能只写一个后备，必须拆成原子属性：background-color: #fff;+background-image: url();
真正容易被忽略的是：构建后 CSS 文件里是否还有 var(；以及 calc() 表达式里哪怕只剩一个空格，IE 也会整条跳过。这不是样式没加载，是浏览器 parser 根本没让它进渲染流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
