J'ai développé un site utilisant Twitter bootstrap et il semble que la partie de mise en page réactive soit cassée dans tous les navigateurs IE à partir de IE8 et des versions antérieures. Est-ce que ce n'est tout simplement pas supporté par ces navigateurs?
Réponses
Trop de publicités?
maxisam
Points
8843
Si vous voulez avoir un meilleur rendement et à votre structure n'est pas trop compliqué.
Vous pouvez essayer Respond.JS
De l'auteur:
Ce n'est pas la seule CSS3 Media Query polyfill script, mais il sacrément bien peut-être le plus rapide.
Si vous êtes à la recherche pour plus robuste CSS3 Media queries, vous pourriez découvrez http://code.google.com/p/css3-mediaqueries-js/. Dans les essais, J'ai trouvé ce script à être sensiblement ralentir lors du rendu complexe responsive design (à la fois en taille et de la performance), mais c'est vraiment prend en charge beaucoup plus de médias fonctionnalités de requête de ce script. Grand chapeau conseil pour les auteurs! :)
Pour appuyer @media des requêtes dans IE 8 et ci-dessous, découvrez
css3-mediaqueries-js.
css3-mediaqueries.js par Wouter van der Graaf est une bibliothèque JavaScript pour faire IE 5+, Firefox 1+ et Safari 2 de manière transparente analyser, de tester et d'appliquer CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ et Chrome offrent déjà de la prise en charge native.
PS: j'utilise Twitter Bootstrap avec ce plugin, et ça marche super! Espérons que cette aide! :)
Rimian
Points
7805
Ce sont ces étapes que j'ai pris à le faire fonctionner:
Jetez un oeil à la response.js page de démonstration dans IE8:
https://rawgithub.com/scottjehl/Respond/master/test/test.html
Il fonctionne donc obtenir que le travail localement par le téléchargement de l'response.js dans votre vendor/actifs ou dans un endroit similaire.
Désactiver votre local bootstrap et essayer ceci dans votre css:
/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
body {
background: blue;
}
}
Il fonctionne!
Parce que j'ai été en utilisant le cdn, j'avais besoin de télécharger et d'héberger en local:
http://getbootstrap.com/getting-started/#download
Ainsi, il fonctionne avec ces:
= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'
Vous aurez également besoin de se débarrasser de tout @déclarations d'importation.
Sergey Onishchenko
Points
510
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
Chris
Points
295
Vous devriez tous lire ce post sur le forum.
Il explique très clairement les défis entre IE et Twitter Bootstrap. Il vous donne é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 travailler dans tous les les navigateurs, même IE7. Ce qui, théoriquement, il peut être, mais vous devez concevoir et développer autour d'un certain état d'esprit lors de l'élaboration de de réactivité.
