Twitter La mise en page réactive de Bootstrap ne fonctionne pas dans IE8 ou une version inférieure

J’ai développé un site en utilisant twitter bootstrap et il semble que la partie mise en page réactive est cassée dans tous les navigateurs IE de IE8 et ci-dessous. Est-ce que ce n’est tout simplement pas supporté pour ces navigateurs?

Pour prendre en @media requêtes @media dans IE 8 et ci-dessous, consultez
css3-mediaqueries-js .

css3-mediaqueries.js de Wouter van der Graaf est une bibliothèque JavaScript qui permet de créer, parsingr et tester des requêtes de support CSS3 de manière transparente dans IE 5+, Firefox 1+ et Safari 2. Firefox 3.5+, Opera 7+, Safari 3+ et Chrome offrent déjà un support natif.

PS: J’utilise Twitter Bootstrap avec ce plugin et ça marche génial! J’espère que cela t’aides! 🙂

Si vous voulez avoir de meilleures performances et que votre structure n’est pas trop compliquée.

Vous pouvez essayer Respond.JS

De l’auteur:

Ce n’est pas le seul script polyfill CSS3 Media Query disponible; mais ça pourrait bien être le plus rapide.

Si vous recherchez une prise en charge plus robuste des requêtes de support CSS3, consultez http://code.google.com/p/css3-mediaqueries-js/ . Lors des tests, j’ai trouvé que ce script était particulièrement lent lors du rendu de conceptions réactives complexes (à la fois en termes de taille de fichier et de performance), mais il prend en charge beaucoup plus de fonctionnalités de requêtes multimédias que ce script. Astuce pour les auteurs! 🙂

Ce sont les mesures que j’ai sockets pour que cela fonctionne:

Jetez un coup d’oeil à la page de démonstration de response.js dans IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html

Cela fonctionne donc, obtenez ce travail localement en téléchargeant la réponse.js dans votre fournisseur / ressources ou quelque part similaire.

Désactivez votre bootstrap local et essayez ceci dans votre css:

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

Ça marche!

Comme j’utilisais le cdn, je devais le télécharger et l’héberger localement:
http://getbootstrap.com/getting-started/#download

Donc, cela fonctionne avec ceux-ci:

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

Vous devrez également vous débarrasser des déclarations @import.

J’ai essayé toutes les méthodes décrites ci-dessus, et cela fonctionne si lentement. Je propose la prochaine approche. Nous devrions décomposer le fichier css qui contient @media et insérer chaque règle dans le fichier séparé. Ensuite, nous devrions télécharger chaque fichier de manière conditionnelle, en fonction de la largeur de l’écran du navigateur. Toutes ces actions feront le script cload.js. Téléchargez cload.js et lisez comment l’utiliser, vous pouvez ici

Vous devriez tous lire ce message sur le forum .

Cela explique très clairement les défis entre IE et Twitter Bootstrap. Cela vous donne également des solutions efficaces.

Citation:

Le problème ici est que sur les pages officielles comme http://twitter.github.com/bootstrap/, il prétend fonctionner dans tous les navigateurs, même IE7. Ce qui, théoriquement, cela peut être, mais vous devez concevoir et développer autour d’un certain état d’esprit lors du développement réactif.

J’ai utilisé le html5shiv à:

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

Cela a fonctionné pour moi. Il est également disponible en utilisant Bower.