Come scegliere come target solo IE (qualsiasi versione) all'interno di un foglio di stile?

Ho un progetto ereditato e ci sono posti in cui è un vero casino. Questo è uno di loro. Devo scegliere come target solo IE (qualsiasi versione).

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

Per essere chiari: all'interno del foglio di stile incorporato e senza aggiungere ID o classi ai tag nell'html, devo applicare lo stile del bordo solo se l'utente utilizza IE. Come posso fare questo?

Modifica: trovata una soluzione per Firefox, modifica domanda per riflettere questo.

Internet Explorer 9 e versioni precedenti : è possibile utilizzare i commenti condizionali per caricare un foglio di stile specifico di IE per qualsiasi versione (o combinazione di versioni) che si desidera targetizzare in modo specifico, come di seguito utilizzando un foglio di stile esterno.

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

Tuttavia, a partire dalla versione 10, i commenti condizionali non sono più supportati in IE.

Internet Explorer 10 e 11: crea una query multimediale utilizzando -ms-high-contrast, in cui inserisci gli stili CSS specifici di IE 10 e 11. Poiché -ms-high-contrast è specifico di Microsoft (e disponibile solo in IE 10+), verrà analizzato solo in Internet Explorer 10 e versioni successive.

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

Microsoft Edge 12: è possibile utilizzare la regola @supports Ecco un collegamento con tutte le informazioni su questa regola

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

Rilevamento della regola IE8 in linea

Ho 1 opzione in più, ma rileva solo IE8 e la versione precedente.

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

Come hai specificato per il foglio di stile incorporato. Penso che sia necessario utilizzare la query multimediale e il commento delle condizioni per la versione di seguito.

Ecco una raccolta di media query che ti permetteranno di farlo per qualsiasi versione di Internet Explorer (da IE6 a IE11 +), Firefox, Chrome e Safari (EDIT: aggiunta anche Opera).

IE 6

* html .ie6 { property: value; }

o

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

o

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

IE 6 e 7

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

o

.ie67 { *property: value; }

o

.ie67 { #property: value; }

IE 6, 7 e 8

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

IE 8

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

o

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

Modalità standard IE 8

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

IE 8,9 e 10

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

Solo IE 9

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

IE 9 e versioni successive

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

IE 9 e 10

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

Solo IE 10

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

IE 10 e versioni successive

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

o

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

IE 11 (e versioni successive ..)

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

Firefox (qualsiasi versione)

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

Firefox (solo 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 e Safari, qualsiasi versione)

@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 (dalla 6.1 alla 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 e inferiori)

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

Per ulteriori informazioni o ulteriori query sui media, visitare il sito Web browserhacks.com e / o consultare questo post sul blog che ho scritto su questo argomento.

Quando utilizzo SASSuso i seguenti 2 @media queriescome target IE 6-10 e 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/

modificare

Ho anche preso di mira le versioni successive di EDGE usando @support queries(aggiungine quante ne hai bisogno)

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

Per il targeting di IE solo nei miei fogli di stile, utilizzo questo Sass Mixin:

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

Un'altra soluzione di lavoro per lo stile specifico di IE è

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

E poi il tuo selettore

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

Dopo aver riscontrato problemi con i siti che si rompono su Edge quando si utilizza la modalità Contrasto elevato, ho riscontrato il seguente lavoro di Jeff Clayton:

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

È una query media folle e strana, ma quelli sono più facili da usare in Sass:

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

Questo target sono previsti dalle versioni IE per IE8.

Oppure puoi usare:

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

Che ha come obiettivo IE8-11, ma attiva anche FireFox 1.x (che per il mio caso d'uso, non importa).

In questo momento sto testando con il supporto di stampa e questo sembra funzionare bene:

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