使用CSSfunction/特征检测来检测IE11

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

为了检测IE10我正在使用JavaScript和能力testing技术来检测某些ms前缀样式定义，如msTouchAction和msWrapFlow 。

我想为IE11做同样的事情，但是我认为所有的IE10风格都将在IE11中被支持。 任何人都可以帮助我确定只有IE11风格或function，我可以用来分辨两者？

额外的信息

  • 我不想使用用户代理types检测，因为它是如此的参差不齐，可以改变，以及我认为我已经读了IE11是故意试图隐藏它的Internet Explorer的事实。
  • 以IE10能力testing如何工作为例，我使用了这个JsFiddle （不是我的）作为testing的基础。
  • 我也期待着很多“这是一个坏主意”的答案。 我的需求之一就是IE10声称它支持某些东西，但是它的实现非常糟糕，我希望能够区分IE10和IE11 +，所以我将来可以继续使用基于能力的检测方法。
  • 这个testing与Modernizrtesting结合在一起，将简单地使一些function“回退”到较不迷人的行为。 我们不是在谈论关键function。

此外，我已经在使用Modernizr，但在这里没有帮助。 我需要帮助解决我清楚问的问题。

鉴于不断演变的线索，我更新了以下内容：

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;} }

IE 11（及以上） 

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

Javascript替代品

Modernizr的

Modernizr在页面加载时可以快速运行以检测function; 然后创build一个包含结果的JavaScript对象，并将类添加到html元素中

用户代理select

使用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'

允许非常有针对性的CSSselect器，例如： 

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

脚注

如果可能的话，找出并解决任何问题，而不用劈头皮。 支持渐进式增强和优雅的降级 。 然而，这是一个“理想的世界”情况，并不总是可以得到的，因此，上述情况应该有助于提供一些很好的select。

归因/基本阅读

  • 杰夫·克莱顿 | Browserhacks.com
  • 基思·克拉克
  • 保罗爱尔兰人
  • networking虔诚
  • 扳手

所以我最终find了自己的解决scheme。

通过微软文档search后，我设法find一个新的IE11风格msTextCombineHorizontal

在我的testing中，我检查IE10风格，如果他们是积极的匹配，那么我检查只IE11风格。 如果我find了，那么它是IE11 +，如果我没有，那么它是IE10。

代码示例： 通过CSSfunctiontesting（JSFiddle）检测IE10和IE11 

  /** Target IE 10 with JavaScript and CSS property detection. # 2013 by Tim Pietrusky # timpietrusky.com **/ // IE 10 only CSS properties var ie10Styles = [ 'msTouchAction', 'msWrapFlow', 'msWrapMargin', 'msWrapThrough', 'msOverflowStyle', 'msScrollChaining', 'msScrollLimit', 'msScrollLimitXMin', 'msScrollLimitYMin', 'msScrollLimitXMax', 'msScrollLimitYMax', 'msScrollRails', 'msScrollSnapPointsX', 'msScrollSnapPointsY', 'msScrollSnapType', 'msScrollSnapX', 'msScrollSnapY', 'msScrollTranslation', 'msFlexbox', 'msFlex', 'msFlexOrder']; var ie11Styles = [ 'msTextCombineHorizontal']; /* * Test all IE only CSS properties */ var d = document; var b = d.body; var s = b.style; var ieVersion = null; var property; // Test IE10 properties for (var i = 0; i < ie10Styles.length; i++) { property = ie10Styles[i]; if (s[property] != undefined) { ieVersion = "ie10"; createEl("IE10 style found: " + property); } } // Test IE11 properties for (var i = 0; i < ie11Styles.length; i++) { property = ie11Styles[i]; if (s[property] != undefined) { ieVersion = "ie11"; createEl("IE11 style found: " + property); } } if (ieVersion) { b.className = ieVersion; $('#versionId').html('Version: ' + ieVersion); } else { createEl('Not IE10 or 11.'); } /* * Just a little helper to create a DOM element */ function createEl(content) { el = d.createElement('div'); el.innerHTML = content; b.appendChild(el); } /* * List of IE CSS stuff: * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx */ 
 body { font: 1.25em sans-serif; } div { background: red; color:#fff; padding: 1em; } .ie10 div { background: green; margin-bottom:.5em; } .ie11 div { background: purple; margin-bottom:.5em; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h1>Detect IE10 and IE11 by CSS Capability Testing</h1> <h2 id="versionId"></h2> 
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { }

添加所有的类或CSS属性。

这对我有效 

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

然后在CSS文件的前缀 

 body.ie11 #some-other-div

这个浏览器何时准备死亡？

看看这篇文章： CSS：用户代理select器

基本上，当你使用这个脚本时： 

 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; }

这似乎工作： 

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here */ }

http://www.limecanvas.com/css-hacks-targeting-ie-10/

你应该使用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的用户代理string目前是这样一个： 

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

这意味着你可以简单地testing版本11.xx， 

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

也许Layout Engine v0.7.0是一个很好的解决scheme。 它使用浏览器function检测，不仅可以检测IE11和IE10，还可以检测IE9，IE8和IE7。 它还检测其他stream行的浏览器，包括一些移动浏览器。 它为html标签添加了一个类，很容易使用，而且在一些相当深的testing中它performance的很好。

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

如果您使用Modernizr – 那么您可以很容易地区分IE10和IE11。

IE10不支持pointer-events属性。 IE11呢。 （ caniuse ）

现在，基于Modernizr插入的类，可以有以下CSS： 

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

您可以使用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一样的lib：

https://github.com/ded/bowser

或用于function检测的modernizr：

http://modernizr.com/

使用以下属性：

  • ！window.MSInputMethodContext
  • ！document.msFullscreenEnabled

检测IE及其版本实际上是非常容易的，至less非常直观： 

 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-';

尝试这个： 

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

退一步：为什么你甚至试图检测“Internet Explorer”，而不是“我的网站需要做X，这个浏览器是否支持这个function？如果是，好的浏览器，如果没有，那么我应该警告用户。

你应该打开http://modernizr.com/而不是继续你在做什么。;

你可以试试这个： 

 if(document.documentMode) { document.documentElement.className+=' ie'+document.documentMode; }

以下是2017年的答案，您可能只关心区分<= IE11> IE11（“边缘”）： 

 @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不支持@supports和所有其他相关的浏览器/版本组合 。

IE11支持的某些-ms-foo专有属性也可能是IE11不支持的，在这种情况下，您可以使用@supports (--what: evr) { }直接针对IE11，而不是使用前述覆盖。

    Interesting Posts

    我在哪里可以find一些示例WPFanimation？

    Google Maps Android API v2 – 示例代码崩溃

    我如何在Eclipse中打开示例Android SDK应用程序

    我在哪里可以find一些Android UI的好例子？

    在“使用Facebooklogin示例”中编译错误

    示例http范围请求会话

    我在哪里可以find具有可在多个数据库引擎中使用的常用格式化数据的示例数据库？