CSS
Hack di Internet Explorer

Osservazioni

Modalità Contrasto elevato in Internet Explorer 10 e versioni successive

In Internet Explorer 10+ e Edge, Microsoft offre il selettore di mezzi multimediali ad -ms-high-contrast per esporre l'impostazione "Contrasto elevato" dal browser, che consente al programmatore di regolare gli stili del proprio sito di conseguenza.

Il selettore -ms-high-contrast ha 3 stati: active , black-on-white e white-on-black . In IE10 + non aveva none stato, ma non è più supportato in Edge in futuro.

Esempi

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
   .header{
      background: #fff;
      color: #000;
   }
}

Ciò cambierà lo sfondo dell'intestazione in bianco e il colore del testo in nero quando la modalità a contrasto elevato è attiva e si trova in modalità black-on-white .

@media screen and (-ms-high-contrast: white-on-black) {
   .header{
      background: #000;
      color: #fff;
   }
}

Simile al primo esempio, ma in particolare seleziona solo lo stato white-on-black e inverte i colori dell'intestazione su uno sfondo nero con testo bianco.

Maggiori informazioni:

Documentazione Microsoft su -ms-high-contrast

Solo Internet Explorer 6 e Internet Explorer 7

Per scegliere come target Internet Explorer 6 e Internet Explorer 7, avvia le tue proprietà con * :

.hide-on-ie6-and-ie7 {
    *display : none; // This line is processed only on IE6 and IE7
}

I prefissi non alfanumerici (diversi da trattini e caratteri di sottolineatura) vengono ignorati in IE6 e IE7, quindi questa modifica funziona per qualsiasi property: value unprefixed property: value coppia di property: value .

Solo Internet Explorer 8

Per @media \0 screen { } target Internet Explorer 8, racchiudi i selettori nella @media \0 screen { } :

@media \0 screen {
    .hide-on-ie8 {
        display : none;
    }
}

Tutto tra @media \0 screen { } viene elaborato solo da I

Aggiunta del supporto Inline Block a IE6 e IE7

display: inline-block;

La proprietà di display con il valore di inline-block non è supportata da Internet Explorer 6 e 7. Una soluzione per questo è:

zoom: 1;
*display: inline;

La proprietà zoom attiva la funzione hasLayout degli elementi ed è disponibile solo in Internet Explorer. Il *display assicura che la proprietà non valida venga eseguita solo sui browser interessati. Gli altri browser ignoreranno semplicemente la regola.