如何通过 CSS 识别 Microsoft Edge 浏览器？答案

【问题标题】：How to Identify Microsoft Edge browser via CSS?如何通过 CSS 识别 Microsoft Edge 浏览器？
【发布时间】：2015-11-19 00:21:36
【问题描述】：

我正在开发 Web 应用程序，我需要将 Microsoft Edge 的浏览器与其他浏览器区分开来，以应用独特的样式。有没有办法使用 CSS 来识别 Edge？就像，

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->

【问题讨论】：

你为什么要这么做？
您几乎可以肯定不需要这样做。你为什么要这么做？
这肯定是您可能需要的东西。在撰写本文时，Edge 仍然充满了怪癖，这些怪癖会严重破坏适用于所有其他浏览器（包括 IE）的有效 CSS。
注意：示例中使用的条件 cmets 仅适用于 IE9 及以下版本，因此 [if IE 11] 将不起作用。

标签： css browser microsoft-edge

【解决方案1】：

/* Microsoft Edge 浏览器 12-18（Chromium 之前的所有版本）*/

这个应该可以的：

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

更多信息请见：Browser Strangeness

【讨论】：

微软正着手在 MS Edge 中移除尽可能多的 -ms 前缀属性，以便与其他浏览器进行互操作。因此，这远不能保证将来会奏效。正如其他答案中提到的，特征检测更可取。
刚刚再次测试它确实有效。演示：jsfiddle.net/pd142446
这个 hack 不再有效，但是这个可以 @supports (-ms-ime-align:auto) { .selector { property: value; } }
@KittMedia 在 Edge 14 中被删除
当然不是，因为——正如我在回答的第一行中所写——它仅适用于版本 12-18。

【解决方案2】：

/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

效果很好！

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

【讨论】：

@r3wt _:-ms-lang(x), _:-webkit-full-screen, - 只有 MS Edge “理解”该规则，其他浏览器忽略它。该规则后跟一个 html 元素的类或 id 名称，因此适用于它。换句话说，如果 css 代码只需要应用于 Edge 浏览器中的 html 元素，请在元素的 class/id 之前放置该特殊规则。
所以浏览器不会忽略这些并定位选择器，因为它们都用逗号分隔？通常 , 在 css 中分隔选择器。这就是为什么这令人困惑。我仍然不明白为什么其他浏览器会忽略这一点，只有 ms-edge 会将 css 应用于逗号后的选择器
@r3wt 如果一个选择器无效，则忽略整个规则组。此处说明css-tricks.com/…
@r3wt 谢谢！ :) 你鼓励我写下最初应该是答案的一部分的细节
@AlexandrKazakov 可能，那是因为最新的 Edge 是基于 Chromium 引擎的（？）你有哪个版本？

【解决方案3】：

Edge（不包括最新的 IE 15）更准确的是：

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } 适用于所有 Edge 版本（目前最高 IE15）。

【讨论】：

【解决方案4】：

For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}

【讨论】：