June 25
Internet Explorer ha una reputazione tra gli sviluppatori web per essere difficile lavorare con a causa di molti bug CSS. Microsoft è anche più lento di aggiungere nuove funzionalità, in particolare il livello di effetti visivi CSS 3 proprietà possono creare. Nel corso degli anni, numerosi hack e gli script sono state concepite per superare i limiti del browser IE, ma la maggior parte gli sviluppatori hanno iniziato a cipiglio sulle soluzioni alternative maldestri. Un insieme di tecniche che vanno da correzioni di base per una soluzione JavaScript sofisticato che renderà più facile per voi per rendere il lavoro CSS come dovrebbe in IE.
1 Utilizzare una vera e propria dichiarazione di tipo di documento. Ciò risolverà molti bug nelle versioni precedenti di Internet Explorer. Dal momento che HTML5 è uscito, il tipo di documento o "doctype" è semplice e facile da ricordare:
<! DOCTYPE HTML>
Questa è la prima linea di codice HTML di una pagina Web. Anche se la vostra pagina Web include già una dichiarazione del tipo di documento, sostituire qualsiasi versione precedente con questo per diminuire la confusione sul fatto che la pagina è di transizione o severa.
2 Aggiungere un foglio di stile "reset" al vostro arsenale di sviluppo Web. Questo è un tipo di foglio di stile che rimuove lo stile di default che i browser si applicano alle pagine Web, in modo da non avrà più bisogno di chiedersi che cosa i valori dei margini Internet Explorer utilizza contro i valori utilizzati da Firefox. Il reset più popolare è ancora ripristinato Eric Meyers '. Prendi il codice di reset dal sito di Meyers a meyerweb.com/eric/tools/css/reset/ e salvarlo nella stessa cartella dove avete salvato la pagina Web. Aggiungere questa riga al di sotto della "<title>" tag nella tua pagina Web per aggiungere il reset:
<Link rel = "stylesheet" href = "reset.css">
3 Utilizzare i commenti condizionali per aggiungere nei fogli di stile solo quando il visitatore sta usando una versione specifica di Internet Explorer:
<! - [If IE 6]>
<Link rel = "stylesheet" href = "ie6.css">
<! [Endif] ->
All'interno della IE solo foglio di stile, aggiungere CSS che corregge bug noti a IE. Due grandi errori di guardare fuori per includere doppi margini e non corretti modelli di calcolo scatola. Il primo bug fa sì che i margini di raddoppiare al posto di sovrapposizione. Il secondo errore causa IE per calcolare padding e bordi come parte della larghezza del contenuto per ogni elemento, ad esempio un div. Ottimizzare i margini e larghezze per l'IE-only CSS risolverà questi.
4 Installare il JavaScript "Modernizr" per la pagina Web. Questo script scopre cosa browser di un utente fa e non supporta e quindi aggiunge le classi per il tag "<body>". Scarica lo script e salvarlo nella stessa cartella in cui si trova la pagina Web. Aggiungere al codice HTML sopra la chiusura "</ head>" tag con "<script>" tag:
<Script src = "path / to / modernizr.js"> </ script>
Seguire la documentazione sul sito Modernizr per scoprire quale dispone che fiuta e come utilizzare le classi.