使用CSS功能/特征检测检测IE11-Java 学习之路

IE10不再支持浏览器检测标记来识别浏览器 .

为了检测IE10，我使用JavaScript和功能测试技术来检测某些 ms 前缀样式，例如 msTouchAction 和 msWrapFlow .

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

Extra Info

我不太喜欢，可以改变，我认为我是Internet Explorer .
有关IE10功能测试如何工作的示例，我使用JsFiddle（不是我的）作为测试的基础 .
我也期待很多"This is a bad idea..."的答案 . 我对此的需求之一是IE10声称它支持某些东西，但实现得非常糟糕，我希望能够区分IE10和IE11，以便将来继续使用基于功能的检测方法 .
此测试与Modernizr测试相结合，该测试只会使一些功能"fallback"成为不那么迷人的行为 . 我们不是在谈论关键功能 .

ALSO I am already using Modernizr, but it doesn't help here. I need help for a solution to my clearly asked question please.

17 回答

3
如果您正在使用Modernizr - 那么您可以轻松区分IE10和IE11 .

IE10不支持 pointer-events 属性 . IE11确实如此 . （caniuse）

现在，基于Modernizr插入的类，您可以拥有以下CSS：
```
.class
{ 
   /* for IE11 */
}

.no-pointerevents .class
{ 
   /* for IE10 */
}
```
回复于 2024-04-24T16:39:14+08:00

根据不断发展的主题，我更新了以下内容：

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不会被定位，as Edge does not support -ms-high-contrast .

IE 11

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

Javascript替代品

Modernizr

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

脚注

如果可能，请确定并修复任何问题，而不是黑客攻击 . 支持progressive enhancement和graceful degradation . 然而，这是一个并不总是可以获得的场景，因此上述应该有助于提供一些好的选择 .

归因/基本阅读

回复于 2024-04-24T16:39:14+08:00

所以我最终找到了解决这个问题的方法 .

搜索Microsoft documentation后，我设法找到了一个新的IE11样式 msTextCombineHorizontal

在我的测试中，我检查IE10样式，如果它们是正面匹配，那么我检查IE11的样式 . 如果我找到它，那么它是IE11，如果我没有，那么它是IE10 .

Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)

/**
  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>

当我发现它们时，我会用更多样式更新代码示例 .

注意：这几乎肯定会将IE12和IE13识别为“IE11”，因为这些样式可能会发扬光大 . 随着新版本的推出，我将进一步增加测试，希望能够再次依赖Modernizr .

我正在使用此测试进行回退行为 . 后备行为只是不那么迷人的样式，它没有减少功能 .

回复于 2024-04-24T16:39:14+08:00

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

}

添加所有类或CSS属性 .

回复于 2024-04-24T16:39:14+08:00

这似乎有效：

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

https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/

回复于 2024-04-24T16:39:14+08:00

12
您可以正常编写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;
    }
}
```
回复于 2024-04-24T16:39:14+08:00
125
这对我有用
```
if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}
```
然后在css文件中加上前缀的东西
```
body.ie11 #some-other-div
```
这个浏览器何时准备好死？
回复于 2024-04-24T16:39:14+08:00

看看这篇文章：CSS: User Agent Selectors

基本上，当您使用此脚本时：

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，我们可以这样做：

FIDDLE

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

回复于 2024-04-24T16:39:14+08:00

试试这个：

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

回复于 2024-04-24T16:39:14+08:00

2
这是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 和all other relevant browser/version combinations .

IE11支持但IE11不支持的某些 -ms-foo 专有属性也可能存在，在这种情况下，您可以使用 @supports (--what: evr) { } 直接单独使用IE11而不是使用上述覆盖 .
回复于 2024-04-24T16:39:14+08:00

你应该使用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的User-agent字符串当前是这样的：

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\./)

回复于 2024-04-24T16:39:14+08:00

3

也许Layout Engine v0.7.0可以很好地解决您的问题 . 它使用浏览器功能检测，不仅可以检测IE11和IE10，还可以检测IE9，IE8和IE7 . 它还可以检测其他流行的浏览器，包括一些移动浏览器它为html标签添加了一个类，易于使用，并且在一些相当深入的测试中表现良好 .

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

回复于 2024-04-24T16:39:14+08:00
2
您可以使用js并在html中添加一个类来维护conditional comments的标准：
```
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

或用于特征检测的现代化：

http://modernizr.com/
回复于 2024-04-24T16:39:14+08:00
3
使用以下属性：
- !! window.MSInputMethodContext
- !! document.msFullscreenEnabled
回复于 2024-04-24T16:39:14+08:00

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

回复于 2024-04-24T16:39:14+08:00

你可以试试这个：

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

回复于 2024-04-24T16:39:14+08:00

1

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

你应该点击http://modernizr.com/而不是继续你正在做的事情 .

回复于 2024-04-24T16:39:14+08:00

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

17 回答

IE 6

IE 7

IE 6和7

IE 6,7和8

IE 8

IE 8仅限标准模式

IE 8,9和10

IE 9

IE 9及以上

IE 9和10

IE 10

IE 10及以上

IE 11

Javascript替代品

Modernizr

用户代理选择

脚注

归因/基本阅读

相关问题