使用CSS功能/特征检测检测IE11

Question

使用CSS功能/特征检测检测IE11IE10 +不再支持浏览器检测标签来识别浏览器。为了检测IE10，我使用JavaScript和功能测试技术来检测某些带ms前缀的样式，例如msTouchAction和msWrapFlow。我想对IE11做同样的事情，但我假设所有的IE10样式也将在IE11中得到支持。任何人都可以帮我识别IE11中唯一可以用来分辨两者的风格或功能吗？额外信息我不想使用用户代理类型检测，因为它太乱了，可以更改，我想我已经读过IE11故意试图隐藏它是Internet Explorer的事实。有关IE10功能测试如何工作的示例，我使用此JsFiddle（不是我的）作为我测试的基础。此外，我期待很多答案“这是一个坏主意......”。我对此的需求之一是IE10声称它支持某些功能，但实现得非常糟糕，我希望能够区分IE10和IE11 +，以便将来继续使用基于功能的检测方法。这个测试与Modernizr测试结合在一起，只会使一些功能“回退”到不那么迷人的行为。我们不是在谈论关键功能。我也在使用Modernizr，但在这里没有用。我需要帮助解决我明确提出的问题。

Answer 1

这是2017年的答案，您可能只关心区分<= IE11和> IE11（“Edge”）：

@supports not (old: ie) { /* code for not old IE here */ }

更多示范性示例：

body:before { content: 'old ie'; }

/**/@supports not (old: ie) {

body:before { content: 'not old ie'; }

/**/}

这是有效的，因为IE11实际上甚至不支持@supports，所有其他相关的浏览器/版本组合都可以。

Answer 2

我在IE11中遇到了与重力形式（WordPress）相同的问题。表单的列样式“display：inline-grid”打破了布局; 应用上面的答案解决了差异！

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */}

Answer 3

您可以正常编写IE11代码，然后使用@supports并检查IE11中不支持的属性grid-area: auto。

然后，您可以在其中编写现代浏览器样式。IE不支持该@supports规则并将使用原始样式，而这些将在支持的现代浏览器中被覆盖@supports。

.my-class {// IE the background will be redbackground: red;
   // Modern browsers the background will be blue
    @supports (grid-area: auto) {
      background: blue;
    }}