2012-07-28 10 views
24

So che è possibile utilizzare un commento condizionale IE all'interno HTML:usare IE commenti condizionali all'interno di un foglio di stile

<!--[if IE]> 
    <link href="ieOnlyStylesheet.css" /> 
<![endif]--> 

Ma cosa succede se voglio indirizzare solo IE in una foglio di stile, la creazione di una regola CSS per un elemento specifico all'interno dell'html. Ad esempio, è possibile utilizzare questo Chrome/Safari hackerare all'interno del file css come codice css ...

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
} 

Ma usando l'IE mod all'interno del foglio di stile CSS in questo modo:

<!--[if IE]> 
     .myClass{ 
     background: #fff; 
     background:rgba(255,0,255,0.7); 
    } 
<![endif]--> 

fa non funziona. Cosa devo usare all'interno di un foglio di stile per scegliere solo IE?

+1

commenti condizionali sono: 1) non è un hack 2) non applicabile ai CSS, solo per HTML. – BoltClock

+0

grazie BoltClock, quindi vedo –

risposta

23

I commenti condizionali non funzionano nei fogli di stile. Invece, puoi usare i commenti condizionali nel tuo codice HTML per applicare classi o ID CSS diversi agli elementi che puoi quindi scegliere come target con i CSS.

Ad esempio:

<!--[if IE]> 
    <div id="wrapper" class="ie"> 
<![endif]--> 
<!--[if !IE]> 
    <div id="wrapper"> 
<![endif]--> 

Inoltre, ci sono strumenti come Modernizr che fanno rilevamento funzionalità in un modo molto simile (aggiungendo classi all'elemento <html>). Puoi usarlo per migliorare progressivamente il tuo design/script per i browser più recenti continuando a supportare i browser più vecchi.

+0

Grazie, il tuo codice ha senso e può essere usato per fare ciò che vorrei ottenere ... –

+0

Come si automatizza Modernizr? Per favore spiegami come sapevo solo che Modernizr "rileva". –

+1

@YannisDran, hai ragione, non automatizzerà l'aggiunta della classe IE, tuttavia, eseguirà il rilevamento delle funzioni che potrai quindi indirizzare tramite CSS in modo simile. Ho aggiornato la risposta per essere più chiaro a riguardo. –

4

Non è possibile utilizzare i commenti condizionali di IE ma è possibile utilizzare gli hack. This page of CSS hacks spiega gli hacker di IE che è possibile utilizzare (e altro ancora).

+0

Grazie, questo tipo risponde alla mia domanda (btw, ho visto questo articolo prima, di solito faccio qualche ricerca prima di pubblicare su Stack), ma ha solo una soluzione in-CSS per IE 7 e qui di seguito e cioè: IE 6 e sotto * html {} IE 7 e sotto *: first-child + html {} * html {} IE 7 solo *: first-child + html {} vorrei un modo per indirizzare tutti i browser IE con un hack in-CSS, ma sembra che non sia possibile. –

2

Non è, è sufficiente utilizzare i commenti condizionali di IE per caricare una specifica IE foglio di stile:

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

ci sono hack CSS, ma si noti che una hack richiede l'utilizzo di un errore di analisi (di qualche tipo) indirizzare una regola CSS specifica a un browser. È improbabile che vengano corretti nelle patch successive a una particolare incarnazione di un browser, ma verranno corretti nelle versioni successive (quindi IE 9 e 10 non sono influenzati dagli hack CSS che hanno come target IE 6 o IE 5 per Mac. ..).

1

Quello che vuoi fare è creare uno stile nel tuo foglio di stile come faresti normalmente con qualsiasi altro browser. DOPO aver importato il normale foglio di stile nella tua pagina, dovrai importare un foglio di stile specifico per IE con la normale istruzione condizionale <!--[if IE]>.

In seguito a questo metodo, gli stili vengono importati per tutti i browser e quindi vengono utilizzati gli stili specifici di IE per ignorare quelli che non sono compatibili, non vengono visualizzati correttamente o devono essere modificati per l'utilizzo in IE.

17

Può essere più facile di quello che Derek Hunziker ha detto:

includere semplicemente questo codice così com'è:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
    <head> 

Quindi è possibile indirizzare facilmente, per esempio se si desidera raggiungere IE 8 e più in basso scrivi:

.lt-ie9 body{css rule here;} 

e il gioco è fatto!

Acclamazioni

2

IE foglio di stile hack

.Class { 
    color: green;  /* standard */ 
    color: green\9; /* IE 8 and below */ 
    *color: green;  /* IE 7 and below */ 
    color: green !ie; /* IE 7 and below */ 
    _color: green;  /* IE 6 */ 
} 
+13

Si prega di non utilizzare gli hack di cui sopra. L'informazione è fuorviante e potrebbe causare più problemi di quanti ne risolvano. Ad esempio, '\ 9' hack * non * targetizza IE 8 e successivi. Colpisce IE 7, 8, 9 e 10. Per favore, ** non usare questi **. – Sampson

Problemi correlati