Problema con diseño responsive en Internet Explorer

[seozeta]

Da igual, ahora hago un resumen sin explicaciones:

Usa eso:

Código HTML:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
 

Y eso:

Código HTML:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
 

Y los @media queries:

Código CSS:

@media only screen
and (max-width : 1024px) { }
 
@media only screen
and (min-width : 769px)
and (max-width : 1024px) { }
 
@media only screen
and (max-width : 768px) { }
 
@media only screen
and (min-width : 481px)
and (max-width : 768px) { }
 
@media only screen
and (max-width : 480px) { }
 
@media only screen
and (min-width : 321px)
and (max-width : 480px) { }
 
@media only screen
and (max-width : 320px) { }
 

Y polyfills, como Modernizr. Además de Google Fonts donde tendrás +600 fuentes para escoger. Con FontAwesome podrás crear +430 iconos vectoriales sin necesidad de usar imágenes png ni sprites, con lo que reducirás mucho la petición de archivos vía http.

Aquí tienes el uso de navegadores: http://www.w3schools.com/browsers/browsers_explorer.asp

Y lo del Can I use ahora me lo ahorro porque lo contó el compañero de arriba.