スタイルシート内のIE（すべてのバージョン）のみをターゲットにする方法は？

私は継承されたプロジェクトを持っていて、それが完全に混乱している場所があります。これはその1つです。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： IE 10および11固有のCSSスタイルを配置する-ms-high-contrastを使用してメディアクエリを作成します。-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 Legacy（pre-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;
}

Google Chrome（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 Webサイトにアクセスするか、このトピックについて書いたこのブログ投稿を確認してください。

使用している場合SASS、私は、次の2を使用して@media queriesIE 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固有のスタイル設定のもう1つの有効なソリューションは、

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