Durante la scrittura di pagine per il Web, ci sono momenti in cui qualcosa viene visualizzato in modo diverso in Internet Explorer che in Firefox o altri browser web. Quando questo accade, sono disponibili tre opzioni: lasciare le differenze, modificare il codice in modo da visualizzare la stessa in tutti i browser, o utilizzare il codice diverso per i diversi browser. Se è necessario utilizzare codice diverso per i diversi browser, ci sono due opzioni: i commenti condizionali o hack CSS. commenti condizionali sono preferiti poiché sono HTML valido e può essere collocato in qualsiasi posizione nel documento in cui commenti possono essere inseriti.

istruzione

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 gli altri browser li ignorano come commenti:

<! - [If IE]>

Questo verrà visualizzato solo per Internet Explorer

<! [Endif] ->

Se si desidera raggiungere una versione specifica di IE, dare il numero di versione, dopo IE:

<! - [If IE 7]>

Si tratta di visualizzazione in Internet Explorer 7

<! [Endif] ->

2 Aggiungere gli operatori, se necessario. Questi operatori permettono di targeting più preciso. Le opzioni operatore sono:

LT: Meno

lasciare: Minore o uguale a

gt: Maggiore di

gte: maggiore o uguale a

!: Non

&: E

|: O

(): Utilizzato per circondare una sottoespressione

vero Vero

falso: Falso

Alcuni esempi sono:

<! - [If IE 7 lt]>

Questo verrà visualizzato nei browser meno di Internet Explorer 7.

<! [Endif] ->

<! - [If (IE 6) | (IE 8)]>

Questo verrà visualizzato in Internet Explorer 6 e Internet Explorer 8.

<! [Endif] ->

<! - [If IE 7]>

Questo verrà visualizzato in Internet Explorer, ad eccezione di Internet Explorer 7.

<! [Endif] ->

3 Obiettivo un Cascading Style Sheet (CSS). Non è possibile utilizzare i commenti all'interno di un foglio di stile, in modo che il modo più comune di utilizzare i commenti condizionali fogli di stile è quello di avere un foglio di stile separato per IE (o specifiche versioni di IE), e li bersaglio con i commenti condizionali. Nel seguente esempio, main.css verrà visualizzato in tutti i browser, nulla in ie.css verrà utilizzato in tutte le versioni di IE e ie7.css verrà utilizzato solo per IE 7.

<Link href = "main.css" rel = "stylesheet" type = "text / css">

<! - [If IE]>

<Link href = "ie.css" rel = "stylesheet" type = "text / css">

<! [Endif] ->

<! - [If IE 7]>

<Link href = "ie7.css" rel = "stylesheet" type = "text / css">

<! [Endif] ->

4 Utilizzare per indirizzare HTML. Mentre i commenti condizionali sono per lo più utilizzati per i CSS, possono anche essere utilizzati per visualizzare HTML specifici per le diverse versioni di IE. Utilizzare gli operatori di indicare quale versione di IE è necessario e aggiungere il codice HTML che si desidera all'interno del commento.

<! - [If IE 8]>

<P> Questo verrà visualizzato solo in Internet Explorer 8 </ p>

<! [Endif] ->

<! - [If lte IE 7]>

<P> Questo verrà visualizzato solo in Internet Explorer 7 o versioni precedenti </ p>

<! [Endif] ->

5 Obiettivo JavaScript. commenti condizionali possono anche essere utilizzati per indirizzare JavaScript o altro codice lato client. Assicurarsi che il posizionamento del commento è valida.

6 Usare CSS hack solo se si dispone di. Mentre i commenti condizionali sono le migliori pratiche, alcuni usano hack CSS per indirizzare Internet Explorer. Prima di decidere di usarli, è meglio sapere perché non sono le migliori pratiche.

hack CSS spesso non sono validi markup, causando il codice di non superare la convalida. hack CSS non sono a prova di futuro. Quando IE 8 è stato rilasciato, un sacco di gente ha dovuto tornare al loro codice e apportare modifiche in modo che le pagine non sono stati rotti in IE 8. Usando il codice che convalida aiuterà a evitare che ciò accada.

Se un hack CSS è ancora necessaria, ci sono vari hack che lavorano in diverse versioni:

colore rosso; / Visualizzerà in tutti i browser che non vengono sovrascritti sotto /

colore: arancio \ 9; / Visualizzerà in IE 8 o al di sotto /

colore: giallo; / Visualizzerà in IE 7 o al di sotto * /

+ colore: verde; / Visualizzerà solo in IE 7 * /

_colore blu; / Visualizzerà in IE6 o al di sotto /

colore: viola \ 0 /; / Viene visualizzato in IE 8 solo. Dovrebbe essere l'ultimo elemento in lista /

Consigli e avvertenze

• Evitare CSS Hacks, quando possibile.