为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

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

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

为了检测IE10,我使用JavaScript和功能测试技术来检测某些带ms前缀的样式,例如msTouchActionmsWrapFlow

我想对IE11做同样的事情,但我假设所有的IE10样式也将在IE11中得到支持。任何人都可以帮我识别IE11中唯一可以用来分辨两者的风格或功能吗?

额外信息

  • 我不想使用用户代理类型检测,因为它太乱了,可以更改,我想我已经读过IE11故意试图隐藏它是Internet Explorer的事实。

  • 有关IE10功能测试如何工作的示例,我使用此JsFiddle(不是我的)作为我测试的基础。

  • 此外,我期待很多答案“这是一个坏主意......”。我对此的需求之一是IE10声称它支持某些功能,但实现得非常糟糕,我希望能够区分IE10和IE11 +,以便将来继续使用基于功能的检测方法。

  • 这个测试与Modernizr测试结合在一起,只会使一些功能“回退”到不那么迷人的行为。我们不是在谈论关键功能。

我也在使用Modernizr,但在这里没有用。我需要帮助解决我明确提出的问题。


查看完整描述

3 回答

?
慕尼黑8549860

这是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所有其他相关的浏览器/版本组合都可以。


查看完整回答
反对 回复 2019-08-26
?
潇湘沐

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

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


查看完整回答
反对 回复 2019-08-26
?
德玛西亚99

您可以正常编写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;
    }}


查看完整回答
反对 回复 2019-08-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信