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

Question

我正在开发网络应用程序，需要单独识别Microsoft Edge浏览器以应用独特的样式。有没有一种方法可以使用CSS来识别Edge？就像这样：

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

- Sameera Liyanage

---

为什么你想要做那件事？ - user663031

你几乎肯定不需要这样做。你为什么要尝试这样做呢？ - Patrick

这确实是你可能需要的东西。在撰写本文时，Edge仍然存在许多怪异问题，这些问题会严重破坏在其他所有浏览器中都有效的CSS，包括IE。 - Lawyerson

注意：示例中使用的条件注释仅适用于IE9及以下版本，因此[if IE 11]实际上不起作用。 - Sean McMillan

Answer 1

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

这个应该可以正常工作：

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

更多信息请参见：Browser Strangeness

- KittMedia

---

微软正在努力删除尽可能多的以“-ms”为前缀的属性，以与其他浏览器实现互操作性。因此，这远不能保证在未来能够正常工作。如其他答案所提到的，更好的选择是使用特性检测。 - Charles Morris - MSFT

刚刚再次测试了一下，它确实可以工作。演示链接：http://jsfiddle.net/pd142446/ - KittMedia

这个黑客方法不再起作用，但是另一个可以。@supports (-ms-ime-align:auto) { .selector { 属性: 值; } } - Roffers

@KittMedia 在 Edge 14 中被移除了。 - LJ Wadowski

当然不是，因为正如我在答案的第一行所写的那样，它只适用于版本12-18。 - KittMedia

Answer 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/

- CodeGust

---

@r3wt _:-ms-lang(x), _:-webkit-full-screen, - 只有 MS Edge 浏览器“理解”这个规则，其他浏览器会忽略它。该规则后面跟着一个 HTML 元素的类或 ID 名称，因此应用于它。换句话说，如果 CSS 代码需要仅在 Edge 浏览器中应用于 HTML 元素，则将该特殊规则放在元素的类/ID 之前。 - CodeGust

那么浏览器不会忽略它们并且定位到选择器，因为它们都被逗号分隔开了？通常在 CSS 中，, 分隔选择器。这就是为什么这很令人困惑。我仍然不明白为什么其他浏览器会忽略这一点，只有 MS Edge 会将 CSS 应用于逗号后面的选择器。 - r3wt

如果一个选择器无效，整个规则组将被忽略。在这里有所说明：https://css-tricks.com/one-invalid-pseudo-selector-equals-an-entire-ignored-selector/ - CodeGust

@r3wt 谢谢你！ :) 你鼓励我写出了一开始应该包含在答案中的细节。 - CodeGust

新的Chromium版本实际上正在使用Chrome的hack技巧，所以现在应该显示12-18。 - Jeff Clayton

Answer 3

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

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

@supports (-ms-ime-align:auto) { ... } 对于所有 Edge 版本都有效（当前版本最高为 IE15）。

- mature

Answer 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);
         }
}

- Priya Nayak