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

Posted 2023-02-21

【中文标题】如何通过 CSS 识别 Microsoft Edge 浏览器？

【英文标题】：How to Identify Microsoft Edge browser via CSS?

【发布时间】：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] 将不起作用。

【参考方案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);