ie11及更早版本完全不支持css自定义属性，会直接丢弃含var()的整条声明，导致样式消失；所有polyfill均需在解析器“废墟”上重建逻辑，且受限于作用域、嵌套表达式、媒体查询变量等硬限制。
因为IE11及更早版本根本不认识var(--x)这个语法，遇到就整行丢弃，而所有Polyfill都得在这个“废墟”上重建逻辑——不是补功能，是抢救被浏览器主动删除的样式。
IE解析器直接跳过含var()的整条CSS声明
这不是降级失败，是声明消失：.btn { background: var(--primary); }在IE里等同于.btn { }。连var(--x, #fff)这种后备写法都无效，因为IE连var()函数括号都不进，更不会去读逗号后面的值。@supports规则本身在IE中也不被识别，整条@supports (color: var(--_)) { ... }会被忽略，起不到检测作用。
css-vars-ponyfill只能处理:root里定义的静态变量
它运行时扫描document.styleSheets，但只认:root和:host下的变量定义。如果你把--gap写在.card { --gap: 1rem; }里，插件根本看不见。同时它不支持：
-
--size: calc(1rem + var(--base));（嵌套calc()+var()） -
@media (min-width: var(--sm)) { ... }（IE直接跳过整个@media块） - JS动态设置的
document.documentElement.style.setProperty('--color', 'red')（除非手动调用cssVars({ variables: { ... } })）
postcss-custom-properties必须设preserve: false才真正生效
默认配置下它只生成双声明：background: #007bff; background: var(--primary);。IE看到第二行就跳过，最终取初始值（比如background变成transparent）。只有preserve: false才会删掉含var()的行，只留静态值。但这也意味着：
- 变量必须定义在
:root，且值为纯常量（不能含calc()、不能引用其他变量） - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析 - 如果同时用了
css-vars-ponyfill又没关preserve，结果是双失效：PostCSS没删var()，ponyfill又因变量未定义或作用域不对而跳过
复合属性和calc()嵌套是硬伤
background: var(--bg);还能靠前置静态值兜底，但width: calc(100% - var(--gap));在IE里是双重崩溃：先因var()被丢弃整个calc()表达式，即使ponyfill把它替换成calc(100% - 16px)，IE11的calc()解析器仍会因空格或单位混合（如16px）直接抛弃整条声明。这不是Polyfill没干活，是IE自身parser的硬限制。
真正麻烦的地方在于：你得同时应付编译期（PostCSS）和运行时（ponyfill）两套逻辑，而它们对变量来源、作用域、表达式复杂度的要求完全不同；稍有错配，样式就静默丢失，还查不出错——控制台没报错，检查元素也看不到element.style，因为根本没生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
