web-dev-qa-db-fra.com

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

J'ai développé un site utilisant Twitter bootstrap) et il semble que la partie de la mise en page réactive soit brisée dans tous les IE navigateurs de IE8 et des versions antérieures. Est-ce tout simplement pas pris en charge pour ces navigateurs?

csstwitter-bootstrapcss3internet-explorer-8media-queries
56
medium

Pour soutenir @media requêtes dans IE 8 et inférieur, consultez
css3-mediaqueries-js .

css3-mediaqueries.js par Wouter van der Graaf est une bibliothèque JavaScript à créer IE 5+, Firefox 1+ et Safari 2 analysent, testent et appliquent de manière transparente les requêtes multimédia CSS3. Firefox 3.5+, Opera 7+, Safari 3+ et Chrome offre 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! :)

33
Praveen Kumar Purushothaman

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 c’est peut-être le plus rapide.

Si vous recherchez un support plus robuste de CSS3 Media Query, vous pouvez vérifier http://code.google.com/p/css3-mediaqueries-js/ . Lors des tests, j'ai constaté que ce script était particulièrement lent lors du rendu de conceptions réactives complexes (à la fois en taille de fichier et en performances), mais il prend en charge beaucoup plus de fonctionnalités de requête multimédia que ce script. Gros coup de chapeau aux auteurs! :)

53
maxisam

Voici les étapes que j'ai prises pour que cela fonctionne:

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

Cela fonctionne donc faites fonctionner cela localement en téléchargeant le response.js dans votre fournisseur/actif ou quelque chose de similaire.

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

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

Ça marche!

Parce que j'utilisais le cdn, j'avais besoin de le télécharger et de 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 de toutes les déclarations @import.

2
Rimian

Vous devriez tous lire cet article du forum .

Il explique très clairement les défis entre IE et Twitter Bootstrap. Il vous fournit également des solutions qui fonctionnent réellement.

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, peut l'être, mais vous devez concevoir et développer selon un certain état d'esprit lorsque vous développez de manière réactive.

0
Chris

J'ai essayé tous les moyens décrits ci-dessus, et cela fonctionne mais 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 conditionnellement télécharger chaque fichier, 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

0
Sergey Onishchenko