使用CSS功能/功能检测来检测IE11


90

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

为了检测IE10,我使用了JavaScript,并定义了一种功能测试技术来检测某些ms前缀样式,例如msTouchActionmsWrapFlow

我想对IE11做同样的事情,但我假设IE11也将支持所有IE10样式。谁能帮助我确定仅IE11可以用来区分两者的样式或功能?

额外信息

  • 我不想使用用户代理类型检测,因为它太参差不齐,并且可以更改,而且我认为我已经读到IE11故意隐藏了它是Internet Explorer的事实。
  • 有关IE10功能测试如何工作的示例,我使用此JsFiddle(而非我的)作为测试的基础。
  • 我也期待得到很多“这是个坏主意……”的答案。我对此的需求之一是IE10声称它支持某种功能,但实现得很差,我希望能够区分IE10和IE11 +,以便将来继续使用基于功能的检测方法。
  • 该测试与Modernizr测试结合使用,该测试将使某些功能“回退”到不太吸引人的行为。我们不是在谈论关键功能。

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


3
为什么您需要知道用户使用的浏览器?功能检测/ CSS前缀/ CSS条件句是否足够?
David-SkyMesh 2013年

4
我忘了提及我们有需要检测浏览器的原因,而功能测试无济于事。IE10只是我们的问题之一,它说它支持某些功能,但不能很好地完成它。
dano 2013年

2
@ David-SkyMesh-不。不幸的是,这还不够。我希望如此,但事实并非如此。
dano 2013年

1
@Evildonald您没有回答为什么需要知道-特别是。这很可能是XY问题。(即:您要求使用X-检测IE11-当我们可以回答其他问题Y-如何与包括IE11的更多浏览器兼容,以便执行任务Z时)
David-SkyMesh 2013年

1
我有一个.js来检测浏览器版本,它说ie11是Firefox。发生了什么事,即开发人员!
Daniel Cheung)

Answers:


163

鉴于线程的发展,我更新了以下内容:

IE 6

* html .ie6 {property:value;}

要么

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

要么

*:first-child+html .ie7 {property:value;}

IE 6和7

@media screen\9 {
    .ie67 {property:value;}
}

要么

.ie67 { *property:value;}

要么

.ie67 { #property:value;}

IE 6、7和8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

要么

@media \0screen {
    .ie8 {property:value;}
}

仅限IE 8标准模式

.ie8 { property /*\**/: value\9 }

IE 8,9和10

@media screen\0 {
    .ie8910 {property:value;}
}

仅限IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9以上

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9和10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

仅限IE 10

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10以上

_:-ms-lang(x), .ie10up { property:value; }

要么

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

使用方式-ms-high-contrast意味着不会将MS Edge作为目标,因为Edge不支持-ms-high-contrast

IE 11

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript替代品

现代化

Modernizr在页面加载时快速运行以检测功能。然后使用结果创建一个JavaScript对象,并将类添加到html元素

用户代理选择

Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

html元素中添加(例如)以下内容:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

允许目标明确的CSS选择器,例如:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

脚注

如果可能的话,找出并解决所有问题,避免被黑客入侵。支持渐进增强正常降级。但是,这并非总是可以实现的“理想世界”场景,因此,上述内容应有助于提供一些不错的选择。


出处/必读


3
这确实是答案。很详细!
egr103

IE10不适用于我。反斜杠9不会删除IE11。我试图显示IE 10的div而不显示IE11的div ...仍然显示在IE 11上...
Merc

真奇怪 它可以在大多数属性上运行,但clip: auto\9;仍会像clip: auto;IE 11中那样被解释。以某种方式不能忽略这一点……
Merc

2
对我来说,第二个IE10选项适用于IE11: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }我在mediacurrent.com/blog/…中
cedricdlb,

1
阅读所有这些内容后,我认为-ms-high-contrast: active可能要避免,因为根据MS规范,您实际上将使用IE 10/11规则在Edge中针对高对比度主题用户。在页面中,此答案-ms-high-contrast实际上指向该链接,它表示-ms-high-contrast: none不再支持该值。我认为没有人提到这一点,因为大多数人没有启用高对比度模式,并且大多数人不使用Edge。但是,仍然有人在那里拥有该配置,这对他们来说可能并不酷。
dmatamales

39

仅定位IE10和IE11(而不是Edge):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* add your IE10-IE11 css here */   
}

1
这样的事情也可能是混蛋!
dano

2
是仅针对IE11还是Edge?
马修·费尔盖特

2
定位到IE10和IE11,但不定位边缘。
杰夫·克莱顿

23

因此,我最终找到了解决该问题的解决方案。

搜索了Microsoft文档之后,我设法找到了一种新的仅IE11样式msTextCombineHorizontal

在测试中,我检查IE10样式,如果它们是正匹配,则检查IE11唯一样式。如果找到它,那就是IE11 +,如果找不到,那就是IE10。

代码示例: 通过CSS能力测试(JSFiddle)检测IE10和IE11

当我发现它们时,我将使用更多样式来更新代码示例。

注意:这几乎可以肯定会将IE12和IE13标识为“ IE11”,因为这些样式可能会延续。随着新版本的推出,我将添加更多测试,并希望能够再次依赖Modernizr。

我将此测试用于回退行为。后备行为只是样式上不那么迷人,它没有减少功能。


8
如果有人要将此答案设为-1,则至少要有礼貌地以技术为由。您可能不同意它。.但是它是正确的并且有效。
dano

7
您如何知道此代码在IE12,IE13等中是否会产生正确的结果?
Evgeny

6
为什么用这种方法代替if (document.documentMode === 11) { ... }?除非,当然,除非您想@supports在规则中使用CSS属性(顺便说一下,IE中尚不支持CSS属性)。
Rob W

1
如果您的body标签中已有类,则将覆盖它们。这是非常小的修复:jsfiddle.net/jmjpro/njvr1jq2/1
jbustamovej 2014年

1
另外,您将要使用CSS隐藏ieVersion元素:#ieVersion {display:none}
jbustamovej 2014年


9

您可以像平常一样编写IE11代码,然后使用@supports并检查IE11中不支持的属性grid-area: auto

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

.my-class {
// IE the background will be red
background: red;

   // Modern browsers the background will be blue
    @supports (grid-area: auto) {
      background: blue;
    }
}

2
这行之有效,是一个很好的解决方案,但是给出的推理是不正确的。IE11完全不支持@supports,因此它会忽略该@supports块中的任何内容。因此,您可以在@supports条件中放置任何内容(例如@supports (display: block)),IE11仍会跳过它。
CodeBiker

1
这就是我所说的“ IE 11将忽略”的意思,但是您是对的,这还不是很清楚。我已经更新了答案,以更清楚地表明IE不支持@supports。
Antfish '18


4

这对我有用

if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}

然后在css文件中添加前缀为

body.ie11 #some-other-div

该浏览器何时准备消亡?


4

试试这个:

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 .legend 
{ 
  line-height: 1.5em;
  position: relative;
  top: -1.1em;   
}

3

看一下本文:CSS:用户代理选择器

基本上,当您使用此脚本时:

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

现在,您可以使用CSS定位任何浏览器/版本。

因此,对于IE11,我们可以这样做:

小提琴

html[data-useragent*='rv:11.0']
{
    color: green;
}

1
那会在Firefox 11中中断(即使现在不支持,也很重要)。它还rv:11.0在其用户代理字符串中。
PhistucK


2

您应该使用Modernizr,它将为body标签添加一个类。

也:

function getIeVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

请注意,IE11仍处于预览状态,用户代理可能会在发布前更改。

IE 11的用户代理字符串当前为:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

这意味着您只需测试11.xx版,

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

感谢Neo,但是我已经在我的身体标签中添加了一个类,并使用了Modernizr。我正在寻找一种在不使用不可靠的用户代理的情况下从IE11区别IE10的方法。
dano

在rv 11中缺少冒号。var isIE11 = !! navigator.userAgent.match(/Trident.*rv:11 \
./)– T.CK

2

也许Layout Engine v0.7.0是适合您情况的好解决方案。它使用浏览器功能检测,不仅可以检测IE11和IE10,还可以检测IE9,IE8和IE7。它还会检测其他流行的浏览器,包括某些移动浏览器。它将一个类添加到html标记中,易于使用,并且在一些相当深的测试中表现良好。

http://mattstow.com/layout-engine.html


2

如果您使用的是Modernizr,则可以轻松地区分IE10和IE11。

IE10不支持该pointer-events属性。IE11做到了。(

现在,基于Modernizr插入的类,您可以具有以下CSS:

.class
{ 
   /* for IE11 */
}

.no-pointerevents .class
{ 
   /* for IE10 */
}

2

您可以使用js并在html中添加一个类来维护条件注释的标准:

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

或使用类似Bowser的库:

https://github.com/ded/bowser

或modernizr用于特征检测:

http://modernizr.com/


2

实际上,检测IE及其版本非常容易,至少非常直观:

var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;

if (uA.indexOf('MSIE 6') >= 0) {
    browser = 'IE';
    ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
    browser = 'IE';
    ieVersion = 7;
}
if (document.documentMode) { // as of IE8
    browser = 'IE';
    ieVersion = document.documentMode;
}

这样,您还可以在兼容模式/视图中捕获较高的IE版本。接下来,分配条件类的问题:

var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
    htmlTag.className += ' ie11-';


2

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

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

1

退一步:为什么您甚至尝试检测“ Internet Explorer”,而不是“我的网站需要X,此浏览器是否支持该功能?

您应该点击http://modernizr.com/,而不要继续执行您的操作。


感谢您提供替代解决方案,但我已经在使用Modernizr,而IE10却对其功能提出了错误的要求。
dano

4
我假设您知道哪个,并向Modernizr提出了问题,以便他们可以为该特定浏览器添加更多Modernizrs检查?(如果没有,则应该这样做。如果您发现影响成千上万开发人员的东西,请向负责填充片的人员提出意见是唯一正确的做法)
Mike'Pomax'Kamermans

7
对于我们这些编写面向用户代码的人,您现在通常需要一个答案,而不是第三方库中存在的错误以及那里的补丁。就是说,很高兴您希望他们改进Modernizr,但这并不适合。
Dean J

1
我认为检测真正的浏览器本身是一个合理的目标。
gwg

@DeanJ当然可以,对于这些问题,其他人也会提供答案。这并不会因此变得不那么重要,获得这样的响应来告诉您考虑自己在做什么。此外,在重新撰写时,还没有对该帖子进行任何编辑,也没有提及“我现在需要它来工作”,因此我没有理由假设他们不希望进行现实检查。
Mike'Pomax'Kamermans
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.