如何在样式表中仅定位IE（​​任何版本）？

我有一个继承的项目，并且在某些地方完全混乱。这就是其中之一。我只需要定位IE（​​任何版本）。

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

需要说明的是：在嵌入式样式表中，并且没有在html中的标记中添加ID或类，我仅在用户使用IE 时才需要应用边框样式。我怎样才能做到这一点？

编辑：找到了Firefox的解决方案，编辑问题来反映这一点。

Internet Explorer 9及更低版本： 您可以使用条件注释为要专门定位的任何版本（或版本组合）加载IE特定的样式表，例如下面使用外部样式表的样式表。

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

但是，从版本10开始，IE中不再支持条件注释。

Internet Explorer 10和11： 使用-ms-high-contrast创建媒体查询，在其中放置IE 10和11特定的CSS样式。由于-ms-high-contrast是特定于Microsoft的（并且仅在IE 10+中可用），因此只能在Internet Explorer 10及更高版本中进行解析。

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

Microsoft Edge 12：可以使用@supports规则 这是有关此规则的所有信息的链接

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

内联规则IE8检测

我还有1个选项，但它仅检测IE8及以下版本。

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

如您所指定的嵌入样式表。我认为您需要针对以下版本使用媒体查询和条件注释。

这是媒体查询的集合，可让您针对任何版本的Internet Explorer（从IE6到IE11 +），Firefox，Chrome和Safari（编辑：还添加了Opera）执行此操作。

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\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

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

Firefox（任何版本）

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}

Firefox（仅Quantum / Stylo）

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }
}

Firefox旧版（Stylo之前的版本）

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }
}

Webkit（Chrome和Safari，任何版本）

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    property: value;
}

谷歌浏览器（29+）

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }
}

Safari（7.1+）

_::-webkit-full-page-media, _:future, :root .safari_only {
    property: value;
}

Safari（从6.1到10.0）

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

Safari（10.1+）

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

歌剧（12+）

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .selector {
        .opera12 {
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    } 
}

歌剧（11岁及以下）

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .opera11 {
        color:#0000FF; 
        background-color:#CCCCCC; 
    }
}

有关更多信息或其他媒体查询，请访问browserhacks.com网站和/或查看我撰写的有关此主题的博客文章。

使用时SASS，请使用以下2 @media queries来定位IE 6-10和EDGE。

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

编辑

我还使用来定位EDGE的更高版本@support queries（根据需要添加任意数量）

@supports (-ms-ime-align:auto)
    @import ie_styles
@supports (-ms-accelerator:auto)
    @import ie_styles

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

为了仅在样式表中定位IE，请使用以下Sass Mixin：

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

IE特定样式的另一个可行解决方案是

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

然后你的选择器

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }

在使用高对比度模式时遇到站点在Edge上中断的问题后，我遇到了Jeff Clayton的以下工作：

https://browserstrangeness.github.io/css_hacks.html

这是一个疯狂的，奇怪的媒体查询，但是这些在Sass中更易于使用：

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

此目标针对IE8预期的IE版本。

或者您可以使用：

@media screen\0 {
  .selector { rule: value };
}

哪一个针对IE8-11，但也触发了FireFox 1.x（对于我的用例而言，无关紧要）。

现在，我正在测试打印支持，这似乎可以正常工作：

@media all\0 {
  .selector { rule: value };
}