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

Question

我有一个继承的项目，但有些地方一团糟。这是其中之一。我只需要针对 IE（任何版本）。

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

要明确：在嵌入样式表和没有在html中的标签中添加ID或类，我需要应用边框样式只 如果用户使用的是 IE。我怎样才能做到这一点？

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

Answer 1

Internet Explorer 9 及更低版本： 您可以使用条件 cmets 为您想要明确定位的任何版本（或版本组合）加载特定于 IE 的样式表。如下所示，使用外部样式表。

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

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

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 规则 Here is a link with all the info about this rule

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

正如您为嵌入样式表指定的那样。我认为您需要对以下版本使用媒体查询和条件评论。

Answer 2

这是一个媒体查询集合，可让您对任何版本的 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; 
        }
    } 
}

Opera（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 网站和/或查看我在此主题上撰写的 this blog post。

Answer 3

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

编辑

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

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

Answer 4

为了只在我的样式表中定位 IE，我使用了这个 Sass Mixin：

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

Answer 5

在使用高对比度模式时遇到网站在 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 };
}

Answer 6

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