你可以在样式标签中使用以下代码:

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

下面是一个对我有用的例子:

<style type="text/css">

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   #flashvideo {
        width:320px;
        height:240;
        margin:-240px 0 0 350px;
        float:left;
    }

    #googleMap {
        width:320px;
        height:240;
        margin:-515px 0 0 350px;
        float:left;
        border-color:#000000;
    }
}

#nav li {
    list-style:none;
    width:240px;
    height:25px;
    }

#nav a {
    display:block;
    text-indent:-5000px;
    height:25px;
    width:240px;
    }
</style>

请注意，由于(#nav li)和(#nav a)在@media屏幕之外…，它们是一般的款式。

所以最后我找到了自己的解决方案。

在搜索微软文档后，我设法找到了一个新的IE11风格msTextCombineHorizontal

在我的测试中，我检查了IE10的样式，如果它们是积极匹配的，那么我检查了IE11的唯一样式。如果我找到了，那就是IE11+，如果我没找到，那就是IE10。

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

当我发现更多的样式时，我将更新代码示例。

注意:这几乎肯定会将IE12和IE13识别为“IE11”，因为这些风格可能会被延续。随着新版本的推出，我将添加进一步的测试，希望能够再次依赖Modernizr。

我用这个测试来测试后备行为。后备行为只是不那么迷人的样式，它没有减少功能。

你可以在样式标签中使用以下代码:

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

下面是一个对我有用的例子:

<style type="text/css">

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
   #flashvideo {
        width:320px;
        height:240;
        margin:-240px 0 0 350px;
        float:left;
    }

    #googleMap {
        width:320px;
        height:240;
        margin:-515px 0 0 350px;
        float:left;
        border-color:#000000;
    }
}

#nav li {
    list-style:none;
    width:240px;
    height:25px;
    }

#nav a {
    display:block;
    text-indent:-5000px;
    height:25px;
    width:240px;
    }
</style>

请注意，由于(#nav li)和(#nav a)在@media屏幕之外…，它们是一般的款式。

从2013年秋天开始，我就一直在写这些，并把它们贡献给BrowserHacks.com——我写的这个非常简单，而且只有IE 11支持。

<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>

当然还有div…

<div class="msie11">
    This is an Internet Explorer 11 CSS Hack
<div>

所以文本在ie11中显示为蓝色。祝你玩得开心。

-

更多IE和其他浏览器的CSS技巧在我的现场测试站点这里:

更新:http://browserstrangeness.bitbucket.io/css_hacks.html

镜子:http://browserstrangeness.github.io/css_hacks.html

(如果你也在寻找MS Edge CSS Hacks，那就是去的地方。)

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

ie11(及以上..)

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

ie10及以上

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

or

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

仅支持IE 10

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

ie9及以上

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

ie9和ie10

@media screen and (min-width:0\0) {
    .foo /* backslash-9 removes.foo & old Safari 4 */
}

只支持ie9

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

IE 8,9和10

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

仅限IE 8标准模式

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

IE 8

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

or

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

IE 7

*+html .foo {property:value;}

or

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

IE 6, 7和8

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

ie6及ie7

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

or

.foo { *property:value;}

or

.foo { #property:value;}

IE 6, 7和8

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

IE 6

* html .foo {property:value;}

or

.foo { _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; M.foo 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;
}

---

脚注

如果可能的话，在不使用黑客的情况下识别并修复任何问题。支持渐进增强和优雅降级。然而，这是一个“理想世界”的场景，并不总是可以实现，因此-以上应该有助于提供一些好的选择。

---

归因/基本阅读

Jeff Clayton | Browserhacks.com 基思•克拉克 保罗爱尔兰 Web虔诚的 的扳手

我发现这很有帮助

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
    <script>
    $(function(){
        $('html').addClass('ie11');
    });
    </script>
<?php } ?>

将此添加到<head>文档下