internet - El diseño receptivo de Twitter Bootstrap no funciona en IE8 o inferior

bootstrap internet explorer compatibility

Question

Desarrollé un sitio usando Twitter bootstrap y parece que la parte de diseño receptivo está rota en todos los navegadores IE de IE8 y de abajo. ¿Esto simplemente no es compatible con estos navegadores?

Answer 1

Estos son los pasos que tomé para que esto funcione:

Eche un vistazo a la página de demostración de response.js en IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html

Funciona de manera que funcione localmente descargando response.js en su proveedor / activo o en algún otro lugar similar.

Deshabilita tu bootstrap local y prueba esto en tu css:

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
  body {
    background: blue;
  }
}

¡Funciona!

Como estaba usando el cdn, necesitaba descargarlo y alojarlo localmente:
http://getbootstrap.com/getting-started/#download

Por lo tanto, funciona con estos:

= stylesheet_link_tag ''bootstrap.min.css''
= stylesheet_link_tag ''bootstrap-theme.min.css''
= stylesheet_link_tag ''my-css''
= javascript_include_tag ''respond.min''

También tendrá que deshacerse de cualquier declaración @import.

Answer 2

He intentado todas las formas descritas anteriormente, y funciona muy lentamente. Ofrezco el próximo acercamiento. Deberíamos descomponer el archivo css que contiene @media e insertar cada regla en el archivo separado. Luego deberíamos cargar de forma condicional cada archivo, dependiendo del ancho de la pantalla del navegador. Todas estas acciones harán el script cload.js. Descargue cload.js y lea cómo usarlo here

Answer 3

Si quieres tener un mejor rendimiento y tu estructura no es demasiado complicada.

Puedes probar Respond.JS

Del autor:

Este no es el único script de polyfill CSS3 Media Query disponible; pero puede ser el más rápido.

Si está buscando un soporte de CSS3 Media Query más robusto, puede visitar css3-mediaqueries-js . En las pruebas, he encontrado que el script es notablemente lento cuando se renderizan diseños complejos (tanto en tamaño de archivo como en rendimiento), pero realmente admite muchas más características de consulta de medios que este script. ¡Un gran consejo para los autores! :)

Answer 4

Usé el html5shiv en:

https://code.google.com/p/html5shiv/

Esto funcionó para mí. También está disponible usando bower.

Answer 5

Todos deberían leer esta publicación en el foro .

Explica muy claramente los desafíos entre IE y Twitter Bootstrap. También te brinda soluciones que realmente funcionan.

Citar:

El problema aquí es que en las páginas oficiales como http://twitter.github.com/bootstrap/ afirma que funciona en todos los navegadores, incluso en IE7. Lo cual, teóricamente puede ser, pero tienes que diseñar y desarrollar en torno a un cierto estado de ánimo cuando desarrollas de forma receptiva.

Answer 6

Para apoyar las consultas de @media en IE 8 y siguientes, echa un vistazo css3-mediaqueries-js css3-mediaqueries-js .

css3-mediaqueries.js de Wouter van der Graaf es una biblioteca de JavaScript para que IE 5+, Firefox 1+ y Safari 2 analicen, prueben y apliquen de forma transparente las consultas de medios de CSS3. Firefox 3.5+, Opera 7+, Safari 3+ y Chrome ya ofrecen soporte nativo.

PD: ¡uso Twitter Bootstrap con este complemento y funciona increíble! ¡Espero que esto ayude! :)