MS Edge 14+专属CSS配置失效，已尝试相关方法仍无效，请求排查

我来帮你搞定这个Edge专属CSS失效的问题～先拆解一下你遇到的问题，再给出针对性的修复方案：

问题分析 #

你用的@supports规则是针对旧版EdgeHTML内核的Edge（Edge 18及更早版本），但可能存在两个问题：

1. 规则里的冗余条件（not (-ms-accelerator:true)和not (-webkit-text-stroke:initial)）可能导致浏览器不满足所有检测条件，从而跳过了样式；
2. 如果你现在测试的是新版Chromium内核的Edge（Edge 79及以后），这个规则完全不适用，因为新版Edge和Chrome共享大部分CSS特性，旧的EdgeHTML专属属性它已经不支持了。

针对性修复方案 #

1. 针对旧版EdgeHTML内核（Edge ≤18） #

简化你的@supports规则，去掉冗余条件，用更可靠的专属属性检测：

.test { color: blue; }

/* 旧版Edge专属样式（EdgeHTML内核） */
@supports (-ms-ime-align: auto) {
  .test { color: red; }
}

/* IE 10+ 专属样式（你的原有规则没问题，保留即可） */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .test { color: red; }
}

-ms-ime-align是旧版Edge独有的CSS属性，IE并不支持，所以这个规则可以精准命中旧版Edge，同时不会影响IE或其他浏览器。

2. 针对新版Chromium内核的Edge（Edge ≥79） #

新版Edge基于Chromium，和Chrome的CSS特性高度重合，纯CSS很难区分两者，最可靠的方法是通过JS给页面添加专属类名，再写对应样式：
首先添加一段JS代码（放在页面<head>或者<body>末尾都可以）：

// 检测是否为新版Chromium Edge
if (navigator.userAgent.includes('Edg/')) {
  document.body.classList.add('edge-chromium');
}

然后在CSS里写专属样式：

.test { color: blue; }

/* 新版Chromium Edge专属样式 */
.edge-chromium .test { color: red; }

/* IE 10+ 专属样式 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .test { color: red; }
}

测试小贴士 #

• 测试旧版Edge可以用微软提供的Edge Legacy模拟器，或者找一台没升级Edge的旧设备；
• 测试新版Edge时，记得清空浏览器缓存，避免旧样式干扰。

内容的提问来源于stack exchange，提问作者aaayumi