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

Question

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

IE10 +不再支持浏览器检测标签来识别浏览器。

为了检测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”打破了布局;&nbsp;应用上面的答案解决了差异！@media&nbsp;all&nbsp;and&nbsp;(-ms-high-contrast:none){ &nbsp;&nbsp;*::-ms-backdrop,&nbsp;.gfmc-column&nbsp;{&nbsp;display:&nbsp;inline-block;}&nbsp;/*&nbsp;IE11&nbsp;*/}

Answer 3

您可以正常编写IE11代码，然后使用@supports并检查IE11中不支持的属性grid-area: auto。然后，您可以在其中编写现代浏览器样式。IE不支持该@supports规则并将使用原始样式，而这些将在支持的现代浏览器中被覆盖@supports。.my-class&nbsp;{//&nbsp;IE&nbsp;the&nbsp;background&nbsp;will&nbsp;be&nbsp;redbackground:&nbsp;red; &nbsp;&nbsp;&nbsp;//&nbsp;Modern&nbsp;browsers&nbsp;the&nbsp;background&nbsp;will&nbsp;be&nbsp;blue &nbsp;&nbsp;&nbsp;&nbsp;@supports&nbsp;(grid-area:&nbsp;auto)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue; &nbsp;&nbsp;&nbsp;&nbsp;}}