it-swarm.it

Come definire regole CSS specifiche solo per IE9?

Amici, per favore aiutami a definire una specifica regola CSS per IE9? Ad esempio come questo

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
25
user632347

Nota che la risposta accettata si rivolge anche a IE10. In quanto tale, per un elenco più completo:

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

Solo 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) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 e versioni successive

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

IE 9 e 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

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 sopra ..)

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

Alternative Javascript

Modernizr

Modernizr funziona rapidamente sul caricamento della pagina per rilevare le funzionalità; allora crea un oggetto JavaScript con i risultati e aggiunge classi al elemento html

Selezione agente utente

Il Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Aggiunge (e.g) il sotto all'elemento html:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Permettendo selettori CSS molto mirati, ad es .:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Nota

Se possibile, evita il targeting del browser. Identifica e correggi qualsiasi problema identificato. Supporto miglioramento progressivo e graceful degradation . Con questo in mente, questo è uno scenario di "mondo ideale" non sempre ottenibile in un ambiente di produzione, in quanto tale - il precedente dovrebbe aiutare a fornire alcune buone opzioni.


Attribuzione/lettura essenziale

30
SW4

Puoi anteporre lo stile CSS a

:root

per renderlo specifico per IE9, come questo:

:root #element { color:pink \0/IE9; }  /* IE9 */
24
simon

Usa IE commenti condizionali:

<!--[if ie 9]>
    your stuff here
<![endif]-->
18
Madara Uchiha

\ 9 è un "hack CSS" specifico per Internet Explorer.

Ciò significa semplicemente che una riga specifica di CSS termina con un\9; 

Nel tuo esempio, Se il tuo CSS fosse così ...

html .twit-post .delete_note a 
{ 
background-position-y: 2px\9; 

}
html .twit-post .delete_note a:hover 
{ 
 background-position-y: -14px\9;
 }

Il risultato sarebbe background-position-y: -14px; in IE 9

8
Harsh

Penso che si possa fare lo stesso come se si volesse scrivere un codice specifico per IE6, ma dire invece IE9 :)

<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->
2
Ahmad Hajjar

usa CSS condizionale: (posiziona il codice sopra <head> sul tuo html, e IE9 leggerà quel file CSS aggiuntivo)

<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->

Ciò significa che l'approccio è con un nuovo file CSS piuttosto che un hack nelle classi, questo garantisce che i CSS sono validi.

1
jackJoe

Ho scoperto che in alcuni casi utilizzando valori negativi (quando si utilizza un compilatore per compilare file LESS) utilizzando:

margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */
0
White Rabbit