Bagaimana menargetkan hanya IE (versi apa saja) di dalam stylesheet?

Saya memiliki proyek warisan dan ada tempat-tempat di mana itu berantakan. Ini salah satunya. Saya hanya perlu menargetkan IE (versi apa pun).

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

Agar lebih jelas: Di dalam stylesheet tertanam dan tanpa menambahkan ID atau kelas ke tag di html, saya perlu menerapkan gaya perbatasan saja jika pengguna menggunakan IE. Bagaimana saya bisa melakukan ini?

Sunting: menemukan solusi untuk Firefox, mengedit pertanyaan untuk mencerminkan ini.

Internet Explorer 9 dan lebih rendah: Anda dapat menggunakan komentar bersyarat untuk memuat stylesheet khusus IE untuk versi apa pun (atau kombinasi versi) yang ingin Anda targetkan secara spesifik. Seperti di bawah ini menggunakan stylesheet eksternal.

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

Namun, mulai versi 10, komentar bersyarat tidak lagi didukung di IE.

Internet Explorer 10 & 11: Buat kueri media menggunakan -ms-high-contrast, di mana Anda menempatkan IE 10 dan 11-gaya CSS spesifik Anda. Karena -ms-kontras tinggi adalah Microsoft-spesifik (dan hanya tersedia di IE 10+), itu hanya akan diuraikan di Internet Explorer 10 dan lebih besar.

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

Microsoft Edge 12: Dapat menggunakan aturan @supports Berikut adalah tautan dengan semua info tentang aturan ini

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

Deteksi aturan IE8 sebaris

Saya memiliki 1 opsi lagi tetapi hanya mendeteksi IE8 dan versi di bawahnya.

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

Seperti yang Anda tentukan untuk stylesheet yang diembed. Saya pikir Anda perlu menggunakan kueri media dan komentar kondisi untuk versi di bawah ini.

Berikut adalah kumpulan kueri media yang akan memungkinkan Anda melakukannya untuk semua versi Internet Explorer (dari IE6 ke IE11 +), Firefox, Chrome & Safari (EDIT: Opera juga ditambahkan).

IE 6

* html .ie6 { property: value; }

atau

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

atau

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

IE 6 dan 7

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

atau

.ie67 { *property: value; }

atau

.ie67 { #property: value; }

IE 6, 7 dan 8

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

IE 8

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

atau

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

Mode Standar IE 8

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

IE 8,9 dan 10

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

Hanya IE 9

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

IE 9 ke atas

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

IE 9 dan 10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

Hanya IE 10

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

IE 10 ke atas

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

atau

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

IE 11 (dan di atas ..)

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

Firefox (versi apa saja)

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

Firefox (Hanya 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, versi apa pun)

@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 (dari 6.1 hingga 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; 
        }
    }
}

Opera (12+)

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

Opera (11 dan lebih rendah)

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

Untuk info lebih lanjut atau pertanyaan media tambahan, kunjungi situs web browserhacks.com dan / atau periksa posting blog ini yang saya tulis tentang topik ini.

Saat menggunakan SASSsaya menggunakan 2 berikut @media queriesuntuk menargetkan 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/

Edit

Saya juga menargetkan versi EDGE nanti menggunakan @support queries(tambahkan sebanyak yang Anda butuhkan)

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

Untuk menargetkan IE hanya di stylesheet saya, saya menggunakan Sass Mixin ini:

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

Solusi lain yang berfungsi untuk styling spesifik IE adalah

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

Dan kemudian pemilih Anda

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

Setelah mengalami masalah dengan situs yang terputus pada Edge saat menggunakan Mode Kontras Tinggi, saya menemukan karya berikut oleh Jeff Clayton:

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

Ini permintaan media yang gila dan aneh, tetapi itu lebih mudah digunakan di Sass:

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

Target ini mengharapkan versi IE untuk IE8.

Atau Anda dapat menggunakan:

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

Yang menargetkan IE8-11, tetapi juga memicu FireFox 1.x (yang untuk kasus penggunaan saya, tidak masalah).

Saat ini saya sedang menguji dengan dukungan cetak, dan ini sepertinya berfungsi dengan baik:

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