2013-04-09 11 views
10

Non riesco a recuperare gli stili in IE8 con elementi HTML5. Ho trascinato lo stackoverflow e Google, nessun suggerimento che ho provato a lavorare.html5shiv non funziona in IE8?

Ho iniziato con una pagina molto più elaborata (sto convertendo un framework XHTML in HTML5) e non mi interessava minimamente, ma dopo aver visto zero risultati in modalità standard IE8 emulato e F12 IE ... ecco il codice semplice non riesco a lavorare:

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta charset="UTF-8" /> 
     <title>Template</title> 
     <style type="text/css"> 
      header { 
       display: block; 
       border:1px solid red; 
      } 
     </style> 
    </head> 
    <body> 
     <header> 
      HTML5 HEADER 
     </header> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    </body> 
</html> 

Si prega di aiutare Obi-Wan, tu sei la mia unica speranza.

risposta

31

Move HTML5Shiv script elemento head sezione, prima tutti gli altri style e script elementi.

+3

In effetti, questo deve accadere per primo. –

+1

@Marat: fatto, e funziona. Questo è stato chiaramente indicato nelle brevissime istruzioni sulla pagina del progetto ... ma non l'ho letto a fondo, e non avrei capito che fosse così: includo sempre gli script nella parte inferiore di un documento. Grazie per la risposta, e ricorda che la documentazione di lettura è ciò che distingue le scimmie dalle persone: P – danjah

+1

Sono contento di averlo trovato prima di aver rotto le mie poche volte. –

5

Sposta lo shiv prima delle dichiarazioni di stile.

Per aumentare le prestazioni nei browser moderni, è possibile utilizzare i commenti condizionali per il shiv.

<!doctype html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta charset="UTF-8" /> 
     <title>Template</title> 

     <!--[if lt IE 9]> 
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <style type="text/css"> 
      header { 
       display: block; 
       border:1px solid red; 
      } 
     </style> 
    </head> 
    <body> 
     <header> 
      HTML5 HEADER 
     </header> 
    </body> 
</html> 
0

Ho avuto un problema simile, ma il mio problema riguardava la sintassi dei commenti condizionali di IE.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>HTML5 Shim Test</title> 

    <style> 
     nav ul { font-weight: bold; } 
     /* the links wont be bold in IE8 unless the shim is working */ 
    </style> 

    <!--[if lt IE 9] > 
    <script src="html5shiv.js"></script> 
    <![endif]--> 

</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
     </ul> 
    </nav> 
</body> 
</html> 

Avete notato lo spazio tra ] e > in <!--[if lt IE 9] >? Neanche io ... per molto tempo. Rimuovi lo spazio e tutto funziona alla grande.

Inoltre, vale la pena ricordare che la pagina del progetto HTML5 Shim fa dire che lo spessore deve essere in <head>, ma può venire dopo i fogli di stile:

"deve essere incluso prima che l'elemento <body> (ovvero nello <head>) ma non importa se appare prima o dopo il CSS - ma per il rendimento di , sarebbe meglio includere il CSS prima di questo script. " via https://code.google.com/p/html5shim/

+2

Spazio extra ?! * scuote un pugno arrabbiato con te * – danjah

Problemi correlati