Durante la scrittura di pagine per il Web, ci sono momenti quando qualcosa viene visualizzato in modo diverso in Internet Explorer in Firefox o altri browser Web. Quando questo accade, avete tre scelte: lasciare le differenze, modificare il codice in modo che venga visualizzato lo stesso in tutti i browser o utilizzare codice diverso per i diversi browser. Se è necessario utilizzare codice diverso per i diversi browser, ci sono due opzioni: commenti condizionali o CSS hacks. I commenti condizionali sono preferibili poiché sono HTML valido e può essere collocati in qualsiasi posizione nel documento in cui è possibile inserire commenti.
Istruzioni
Commenti condizionali
1
Creare un commento con un'istruzione condizionale e il codice da visualizzare se la condizione è soddisfatta. Internet Explorer può leggere questi commenti condizionali, mentre altri browser ignorarli come Commenti:
<!-[se IE] >
Questo verrà visualizzato solo per Internet Explorer
<! [endif]-->
Se si desidera utilizzare una versione specifica di IE, dare il numero di versione, dopo Internet Explorer:
<!-[se IE 7] >
Si tratta di visualizzazione in Internet Explorer 7
<! [endif]-->
2
Aggiungere operatori come necessario. Questi operatori consentono per il targeting più preciso. Le opzioni di operatore sono:
LT: meno di
Lasciate che: minore o uguale a
gt: maggiore di
GTE: maggiore o uguale a
!: Non
&: e
|: O
(): Utilizzato per racchiudere una sottoespressione
vero: True
falso: False
Alcuni esempi sono:
<!-[se lt IE 7] >
Questo verrà visualizzato nei browser meno di Internet Explorer 7.
<! [endif]-->
<!-[se (IE 6) | ( IE 8)] >
Questo verrà visualizzato in Internet Explorer 6 e Internet Explorer 8.
<! [endif]-->
<!-[se! IE 7] >
Questo verrà visualizzato in Internet Explorer, ad eccezione di Internet Explorer 7.
<! [endif]-->
3
Destinazione un foglio di stile CSS (CSS). Non è possibile utilizzare commenti all'interno di un foglio di stile, quindi il modo più comune per utilizzare i commenti condizionali di fogli di stile è quello di avere un foglio di stile separato per IE (o specifiche versioni di IE) e impostare come destinazione con i commenti condizionali. Nell'esempio seguente, Main. CSS verrà visualizzato in tutti i browser, nulla in IE verrà utilizzato in tutte ie versioni e ie7.css saranno utilizzati solo per IE 7.
< link href "rel ="stylesheet"type =" text/css">
<!-[se IE] >
< link href="ie.css" rel = "stylesheet" type = "text/css" >
<! [endif]-->
<!-[se IE 7] >
< link href="ie7.css" rel = "stylesheet" type = "text/css" >
<! [endif]-->
4
Uso di HTML di destinazione. Mentre i commenti condizionali sono utilizzati principalmente per CSS, essi utilizzabile anche per visualizzare codice HTML specifici per diverse versioni di IE. Utilizzare gli operatori per scegliere quale versione di IE avete bisogno e aggiungere il codice HTML che si desidera all'interno del commento.
<!-[se IE 8] >
< p > solo questo sarà visualizzato in Internet Explorer 8 </p >
<! [endif]-->
<!-[se lte IE 7] >
< p > solo questo sarà visualizzato in Internet Explorer 7 o versioni precedenti </p >
<! [endif]-->
5
JavaScript di destinazione. Commenti condizionali è utilizzabile anche per JavaScript o altro codice sul lato client di destinazione. Assicurarsi che il posizionamento del commento è valido.
6
Usare CSS hack solo se è necessario. Mentre i commenti condizionali sono migliori pratiche, alcuni useranno CSS hack per destinazione Internet Explorer. Prima di decidere di utilizzarli, è meglio sapere perché non sono buone pratiche.
CSS hack sono spesso non markup valido, causando il codice non supera la convalida. CSS Hack, inoltre, non sono a prova di futuro. Quando è stato rilasciato Internet Explorer 8, un sacco di gente ha dovuto ritornare al loro codice e apportare modifiche in modo che le pagine non erano rotti in IE 8. Utilizzando il codice che convalida aiuterà a prevenire tutto questo.
Se è ancora necessario un hack CSS, ci sono vari hack che lavorano in diverse versioni:
colore: rosso; /verrà visualizzato in tutti i browser che non ottenere sottoposto a override sotto/
colore: orange\9; /Visualizza in IE 8 o di sotto/
colore: giallo; /verrà visualizzato in Internet Explorer 7 o inferiore * /
+ colore: verde; /visualizzerà solo in IE 7 * /
_color:Blue; /Visualizza in IE6 o sotto/
colore: purple\0 /; /verrà visualizzato solo in IE 8. Dovrebbe essere l'ultimo elemento nell'elenco/
Consigli & Avvertenze
- Evitare di CSS Hacks quando possibile.