IE10 +不再支持浏览器检测标记来识别浏览器。
为了检测IE10，我使用JavaScript和功能测试技术来检测某些ms前缀样式，例如msTouchAction和msWrapFlow。
我想对IE11做同样的事情，但我假设IE11中也支持所有的IE10样式。任何人都可以帮我识别IE11中唯一可以用来分辨两者的风格或功能吗？
额外信息
我已经在使用Modernizr，但在这里没有帮助。我需要帮助解决我明确提出的问题。
答案 0 :(得分：134)
根据不断发展的主题，我更新了以下内容：
* html .ie6 {property:value;}
或
.ie6 { _property:value;}
*+html .ie7 {property:value;}
或
*:first-child+html .ie7 {property:value;}
@media screen\9 {
.ie67 {property:value;}
}
或
.ie67 { *property:value;}
或
.ie67 { #property:value;}
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
html>/**/body .ie8 {property:value;}
或
@media \0screen {
.ie8 {property:value;}
}
.ie8 { property /*\**/: value\9 }
@media screen\0 {
.ie8910 {property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
@media screen and (min-width:0) {
.ie910{property:value;}
}
_:-ms-lang(x), .ie10 { property:value\9; }
_:-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。
_:-ms-fullscreen, :root .ie11up { property:value; }
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。然而，这是一个并非总能获得的“理想世界”场景，因此上述内容应该有助于提供一些好的选择。
答案 1 :(得分：22)
所以我最终找到了解决这个问题的方法。
搜索Microsoft documentation后，我设法找到了新的IE11样式msTextCombineHorizontal
在我的测试中，我检查IE10样式，如果它们是正面匹配，那么我检查IE11的样式。如果我找到它，那么它是IE11 +，如果我没有，那么它是IE10。
代码示例： 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。
我正在使用此测试进行回退行为。后备行为只是不那么迷人的风格，它没有减少功能。
答案 2 :(得分：18)
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}
添加所有类或CSS属性。
答案 3 :(得分：15)
这似乎有效：
@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/
答案 4 :(得分：6)
您可以正常编写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;
}
}
答案 5 :(得分：4)
这是2017年的答案，您可能只关心区分＆lt; = IE11与＆gt; 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。
答案 6 :(得分：3)
这对我有用
if(navigator.userAgent.match(/Trident.*rv:11\./)) {
$('body').addClass('ie11');
}
然后在css文件中以前缀为
的东西body.ie11 #some-other-div
这个浏览器何时准备好死？
答案 7 :(得分：3)
看一下这篇文章：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;
}
答案 8 :(得分：3)
试试这个：
/*------Specific style for IE11---------*/
_:-ms-fullscreen, :root
.legend
{
line-height: 1.5em;
position: relative;
top: -1.1em;
}
答案 9 :(得分：2)
使用以下属性：
答案 10 :(得分：2)
你可以试试这个：
if(document.documentMode) {
document.documentElement.className+=' ie'+document.documentMode;
}
答案 11 :(得分：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-';
答案 12 :(得分：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：
或用于特征检测的现代化：
答案 13 :(得分：2)
如果您正在使用Modernizr - 那么您可以轻松区分IE10和IE11。
IE10不支持pointer-events属性。 IE11确实如此。 （caniuse）
现在，根据Modernizr插入的类，您可以使用以下CSS：
.class
{
/* for IE11 */
}
.no-pointerevents .class
{
/* for IE10 */
}
答案 14 :(得分：2)
也许Layout Engine v0.7.0对您的情况来说是一个很好的解决方案。它使用浏览器功能检测，不仅可以检测IE11和IE10，还可以检测IE9，IE8和IE7。它还可以检测其他流行的浏览器，包括一些移动浏览器它为html标签添加了一个类，易于使用，并且在一些相当深入的测试中表现良好。
答案 15 :(得分：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的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\./)
答案 16 :(得分：1)
我在IE11中遇到了重力表（WordPress）的相同问题。表单的列样式“ display：inline-grid”破坏了布局；应用以上答案解决了差异！
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}
答案 17 :(得分：0)
你应该点击http://modernizr.com/而不是继续你正在做的事情。