2011-09-09 10 views
6

Il seguente codice è per affidabile cross-browser IE rilevamento versionevale a dire i commenti condizionali hanno bisogno di spiegazione

<!--[if lt IE 7 ]><body class="ie_6"><![endif]--> 
<!--[if IE 7 ]><body class="ie_7"><![endif]--> 
<!--[if IE 8 ]><body class="ie_8"><![endif]--> 
<!--[if IE 9 ]><body class="ie_9"><![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> 
<body> 
<!--<![endif]--> 

Quello che non capisco è, perché è working.Why normale <body> non ha sovrascrivere il <body class="ie_9"> dal è solo un normale tag, dovrebbe essere riconosciuto da tutti i browser.

Qual è la magia su

<!--> 
    <body> 
    <!-- 
+0

Ho spiegato un po 'di più sulla "magia" in una modifica alla mia risposta, dopo averlo accettato, quindi lo metto qui per assicurarmi che tu lo veda :) – Joe

risposta

11

Probabilmente si desidera cambiare !(IE)-(!IE)

Inoltre, il "normale" <body> tag si sta parlando è in un commento condizionale. Il fatto che si trovi su una linea diversa non ha importanza, è ancora all'interno del tag del commento condizionale, quindi è influenzato in quanto tale.

I commenti condizionali per IE funzionano utilizzando i normali commenti HTML <!-- --> in modo che qualsiasi codice all'interno di un condizionale "falso" sia appena commentato; <!-- <body class="ie6"> --> IE ha quindi una propria sintassi all'interno di quello. In quanto tale, i browser non IE vedono solo una stringa commentata e IE la considera come una dichiarazione da eseguire.

Per questo motivo, viene visualizzato solo un tag del corpo e solo quello viene utilizzato.


Più spiegazione

<!--[if (gt IE 9)|!(IE)]><!--> 
<body> 
<!--<![endif]--> 

a IE, questo dice:

<if greater than ie9, or not ie> (ie conditional comment) 
<!--> (empty comment) (--> putting this here to stop SO ruining syntax highlighting :D) 
<body> 
<end if> (ie conditional comment) 

Se non si capisce il motivo per cui, leggere il paragrafo di partenza "commenti condizionali per il lavoro IE .. . ".

Questo stesso blocco, a qualsiasi altro browser si presenta così:

<!--[if (gt IE 9)|!(IE)]><!--> (this is just one comment, containing the text "[if (gt IE 9)|!(IE)]><!") 
<body> 
<!--<![endif]--> (again, just one comment, containing "<![endif]") 
3
<!--[if (gt IE 9)|!(IE)]><!--> 
<body> 
<!--<![endif]--> 

significa: Ouput il <body> lì, se la versione del browser è maggiore di (gt) IE9 (così, ad esempio, IE10) o se non è IE.

Poiché IE9 è attualmente l'ultima versione, questa condizione non è soddisfatta da alcun IE.

Il trucco è che --> nella prima riga chiuderà il commento in altri browser, quindi per loro, <!--[if (gt IE 9)|!(IE)]><!--> è solo un commento normale (lo stesso per <!-- l'ultima riga).

Ma IE analizzerà <!--[if (gt IE 9)|!(IE)]> e <![endif]--> e considererà <!--><body><!-- come il contenuto del commento condizionale. Il che significa che se la condizione è soddisfatta, emette un commento vuoto, il tag <body> e l'inizio di un commento.

MSDN ha una descrizione esaustiva su conditional comments.Sembra che si potrebbe ottenere lo stesso utilizzando di livello inferiore-rivelati i commenti condizionali:

<![if (gt IE 9)|!(IE)]> 
<p>Please upgrade to Internet Explorer version 8.</p> 
<![endif]> 

(anche se non è valida HTML).

+0

'' dovrebbe essere solo un tag normale , dovrebbe essere riconosciuto da tutti i browser, indipendentemente dalla versione o dalla produzione – wukong

+0

Buona risposta. Giusto per aggiungere che il motivo per cui hai bisogno dei due '->' e ' chris5marsh

+0

'' è ** NOT ** commnetato – wukong

Problemi correlati