Edge 12–18 部分支持 mix-blend-mode 但存在静默失效风险，需强制 isolation + 渐变 fallback；Edge 79+ 完全支持但仍有布局限制，所有 Edge 版本均应默认启用 fallback。
mix-blend-mode 在 Edge 中的兼容性问题，核心结论是：Edge 12–18（即旧版 EdgeHTML 内核）基本支持，但存在静默失效风险；Edge 79+（Chromium 内核）完全支持，可视为 Chrome 同等对待。真正要防的不是“不支持”，而是“声称支持却渲染为 normal”。
Edge 12–18 的混合模式表现不稳定
旧版 Edge（EdgeHTML）虽在文档中标注支持 mix-blend-mode: multiply 等值，但实际行为常与规范脱节：
- 未设置
isolation: isolate时，混合常被父级层叠上下文截断，效果消失 - 与
transform、opacity或filter混用时，触发强制硬件加速后易出现闪烁或图层错位 - 某些 SVG 容器中启用
mix-blend-mode会直接忽略声明，DevTools 里属性灰掉但无报错 - Android WebView 嵌套的 EdgeHTML（如部分企业内嵌应用）完全不解析该属性，连
@supports都返回false
@supports (mix-blend-mode: multiply) 在 Edge 中不可信
Edge 15–18 会返回 CSS.supports('mix-blend-mode', 'multiply') 为 true，但渲染结果恒为 normal——这不是 bug，是检测仅验证语法解析，不校验合成路径是否启用。
- 不能把文字可读性、图标识别等关键逻辑建立在该检测结果上
- 服务端 UA 识别更可靠：匹配
Edge/1[2-8]或Edg/[1-7][0-9]（注意区分 EdgeHTML 与 Chromium Edge 的 UA 格式） - 真机测试必须覆盖 Surface Pro 3/4（Win10 + Edge 16）、Windows Phone 10（Edge 14）等典型旧环境
Edge 兼容方案：isolation + 渐变 fallback 是底线
对 Edge 12–18，放弃运行时混合，改用静态视觉模拟是最稳路径：
Money Knowledge
下载
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
立即学习“前端免费学习笔记（深入）”；
- 必须给混合容器显式加
isolation: isolate，哪怕只针对 Edge；position: relative或z-index无法替代 - fallback 写法要严格按顺序：
background-image: url("fallback.jpg"); background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("main.jpg"); - 渐变层禁用
hsla()或分离写法（如background-color: rgba(0,0,0,0.4)），必须用rgba()直接嵌入linear-gradient - 避免混用 PNG 与 SVG 背景层，Edge 17 在某些缩放比例下会将 SVG 渲染为纯黑块
Chromium Edge（79+）可放心用，但别跳过 isolation
Edge 79+ 使用 Blink 内核，mix-blend-mode 行为与 Chrome 一致，但仍有细节差异：
- 仍需写
isolation: isolate，否则在某些 flex/grid 布局中混合范围会被意外限制 -
background-blend-mode支持度略高，但多层背景叠加时，必须所有层共用相同background-origin和background-clip，否则整条声明静默退化 - 动画中切换
mix-blend-mode值（如 hover 切multiply↔screen）在低端 Surface 设备上可能掉帧，建议改用opacity或background-color动画替代
最易被忽略的一点：Edge 12–18 对 isolation: isolate 的解析本身就不稳定——它可能创建了层叠上下文，却不开放混合通道。所以 fallback 不是“锦上添花”，而是所有 Edge 版本都该默认启用的视觉保底。
