Le migliori soluzioni per i bug di Internet Explorer – Per web designer
19 maggio 2011 
Una delle tantissime problematiche che un web designer deve combattere, durante la realizzazione di un progetto online, è risolvere i bug di Internet Explorer.
Infatti questo browser ne ha tantissimi problemi per ogni sua versione. Gli ostacoli sono vari: dalla gestione del box model di css, all’interpretazione dei css3, fino a giungere all’interpretazione dei vari formati immagine ( png per l’esattezza ).
Per questo oggi ho raccolto tutti quei plugin aggiuntivi alla nostra pagina che ci permettono di risolvere tutti questi problemi di IE.
1) HTML5 su IE8 e inferiori
Con l’avvento del nuovo linguaggio di Markup nella sua versione numero 5, molti web designer vengono scoraggiati dalla fortissima presenza di browser di casa Microsoft che non supportano tale linguaggio.
Questa semplicissima libreria ci permette di utilizzare tale linguaggio anche su IE 6, 7 e 8.
1 2 3 | <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
2) Supportare i PNG
Il formato PNG è nato nel lontano 1995, ed è diventato raccomandazione W3C l’anno dopo, ed ancora oggi i browser IE6 e IE7 non supportano tale formato al 100% rendendo impossibile la loro visualizzazione.
Se voleste utilizzare tale formato anche su questi browser vi consiglierei questo plugin aggiuntivo:
1 2 3 | <style type="text/css"> img, div { behavior: url(iepngfix.htc) } </style> |
3) Box Model Bug
Questo può essere tranquillamente definito il re dei bug di Internet Explorer 6, in quanto interpreta in maniera differente il box model (la gestione delle dimensioni di ogni elemento inline e block) non seguendo le direttive della W3C.
Per risolvere tale problema potremmo utilizzare tranquillamente una dichiarazione completa di questo genere:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* maniera errata */ div { width: 200px; height: 200px; } /* metodo esatto */ div { width: 200px; height: 200px; padding: 0px; margin: 0px; } |
Infatti ho dichiarato sia i Margini sia il padding in maniera univoca, così da renderlo uguale su ogni browser.
4) Css3 su IE 6 / 7 / 8
Questo argomento è stato molto discusso sul mio blog, per questo rimando a due link dove spiego in maniera molto dettagliata come utilizzare css3PIE e ie-css3:
PIE: Css3 su Internet Explorer 8,7,6
Il mio primo sito in Html5 e Css3 [Esperimento]
5) Placeholder di HTML5
Placeholder è il nuovo attributo di HTML5 che permette di inserire un tag <input> di form, un testo alternativo nel caso il campo sia stato lasciato immacolato e non compilato.
Peccato che tale novità non venga supportata da Internet Explore in tutte le sue versioni compresa la 9. Per questo oggi vi suggerisco questo plugin di jquery che rende disponibile questa funzione anche sui browser di casa Microsoft.
1 2 3 | <script> $(function() { $('input, textarea').placeholder();}); </script> |
http://mathiasbynens.be/demo/placeholder
6) Libreria risolve i BUG di IE7
Con il passare degli anni IE7 ha dimostrato di essere un vero discendente di IE6 portando con sé tantissimi bug. Ma, grazie a questa libreria creata da Dean Edwords, è possibile risolvere una marea di bug in un colpo solo
1 2 3 | <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script> <![endif]--> |
http://ie7-js.googlecode.com/svn/test/index.html
7) Pseudo classi di css3 su IE8 e inferiori
Tra le tante novità che porta css3 c’è quella delle pseudo classi di css3. Per farle funzionare sui browser di casa Microsoft, che come al solito non supportano nulla, possiamo utilizzare tranquillamente questa libreria che si chiama Selectivizr.
1 2 3 4 5 | <script type="text/javascript" src="[JS library]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> |
8 ) Mediaqueries di css3 su tutti i browser
Altra novità fondamentale che ci porta css3 è il box model, che funziona ahimè su tutti i browser tranne su quelli IE.
Per questo esiste un fantasmagorico plugin in js che si permette di far funzionare tale regola anche su browser che non supportano questa nuova funzione:
1 2 3 | <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
Queste sono le librerie e i plugin che io utilizzo, voi ne conoscete altre? Volete dire la vostra? Scrivete un commento e fatemi sapere 
Potresti trovare interessante anche
Ottimo non conoscevo quello dell’opacità