Edge 12–18完全不支持CSS变量，遇到var(--color)直接忽略整条声明；Edge 75–78在伪元素中存在解析竞态；Edge 79+虽默认支持但受实验性flag和空格截断bug影响。
Edge 18及更早版本根本不支持CSS变量
EdgeHTML内核（即Edge 12–18）对--custom-property语法完全无解析能力，遇到var(--color)会直接忽略整条声明，且不报错。这不是渲染“异常”，而是语法层面未识别——浏览器把它当作了无效值，退回到初始值或继承值。如果你在Edge 18中看到文字颜色、间距、背景等突然回退到默认状态，大概率就是这个原因。
验证方式很简单：打开开发者工具 → Elements面板 → 找到使用了var()的样式行，若该行被划掉（strikethrough）且旁边没有“computed”值，说明未生效。
- Edge 18及之前：零支持，必须降级为预处理变量或内联CSS
- Edge 79+（Chromium内核）：完整支持，包括
var()、calc()嵌套、动态更新 - Edge 75–78：部分支持，但
var()在@keyframes或伪元素中可能失效
Edge 75–78中var()在::before/::after里不生效
这是Chromium早期移植CSS变量时遗留的bug：Edge 75–78对伪元素中的var()解析存在竞态，尤其当变量定义在:root之外（比如某个组件类里）时，伪元素可能读取不到最新值，表现为图标内容为空、提示文字缺失或content: var(--tip)渲染成空字符串。
临时绕过方法是强制触发重计算：
立即学习“前端免费学习笔记（深入）”；
- 把变量提升到
:root作用域，避免局部作用域延迟绑定 - 改用
data-*属性 + JS读取赋值，例如element.style.setProperty('--tip', element.dataset.tip) - 避免在伪元素中使用
var()驱动content，改用JS插入文本节点
Edge 79+开启“实验性Web平台功能”后反而变差
Edge 79起默认启用CSS变量，但如果你在edge://flags里手动启用了#enable-experimental-web-platform-features，某些旧版CSS Houdini API或@property规则会干扰变量解析管线，导致var(--size)被错误解析为0px或NaN，尤其在配合calc()时出现布局塌陷。
这不是CSS变量本身的问题，而是flag开启后激活了不稳定的底层解析器分支。建议：
- 访问
edge://flags，搜索该flag，设为Default或Disabled - 不要在生产环境依赖
@property声明CSS变量类型，Edge对syntax: "<length>"校验极不稳定 - 用
getComputedStyle(el).getPropertyValue('--size')在控制台手动验证变量是否被正确读取，而非只看Elements面板
变量值含单位时在Edge中被截断
Edge 79–90有个隐藏bug：当CSS变量值带单位且含空格（如--gap: 1rem ;末尾多一个空格），或变量值为calc(1em + 2px)但calc()内部有不必要空格时，Edge会截断单位，变成1rem → 1，calc(1em + 2px) → calc(1em，最终计算失败，回退为auto或0。
这在其他浏览器中通常能容错，但在Edge中非常敏感。排查重点：
- 检查所有
:root和@media中变量定义，删除;前多余空格 - 避免在
var()调用里嵌套calc()，改用外部calc()包裹，例如width: calc(var(--base) * 2)优于width: var(--base-calc) - 用PostCSS插件
postcss-custom-properties做构建时降级，它会把var(--size)转为实际值（需提供fallback）
真正麻烦的不是Edge不支持，而是它“假装支持”——解析一半就停，既不报错也不警告，变量值悄无声息地变成initial。上线前务必在Edge真实环境中用getComputedStyle逐个验证关键变量的返回值，别信Elements面板里的“已应用”标记。
