web-dev-qa-db-fra.com

Comment faire Bootstrap responsive layout layout work sur IE8

J'ai cherché pendant un certain temps et j'ai trouvé que certaines personnes le faisaient fonctionner, mais aucune d'entre elles ne fournissait d'exemples de code.

J'ai essayé leurs suggestions mais cela n'a pas fonctionné pour moi. Par des suggestions, j'ai essayé d'ajouter <meta http-equiv="X-UA-Compatible" content="IE=Edge" />, respond.js ou css3-mediaqueries-js, mais aucun n'a aidé.

Voici un jsfiddle , si vous le visualisez avec IE8, vous verrez que a et b sont sur la même ligne quelle que soit la largeur de votre navigateur.

Mais si vous affichez avec Chrome, FF ou IE9 ou supérieur, vous les verrez sur différentes lignes ou sur une seule ligne en fonction de la largeur du navigateur.

[~ # ~] mise à jour [~ # ~]

J'ai essayé de décommenter l'un d'eux (css3-mediaquery, html5shiv et respond) à la fois, mais je n'ai eu de chance avec aucun d'entre eux.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script>
</body>

</html>
twitter-bootstrapinternet-explorer-8responsive-designmedia-queriesfluid-layout
19
Ray Cheng

IE 8 ne prend pas en charge les requêtes multimédias.

Basé sur cette question et cette question , vous allez vouloir utiliser une extension comme css3-mediaqueries-js ou Répondre .

31
Jason Towne

Essayez d'utiliser html5shiv , c'est essentiellement un script d'activation HTML5 IE et qui devrait obtenir bootstrap travaillant dans IE 6,7 et 8. Cela peut également être directement lié à chaud comme ceci:

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

Il doit être inclus avant l'élément <body> (c'est-à-dire dans <head>)

10
Akshay Raje

Votre problème essaie d'utiliser respond.js avec des feuilles de style CSS situées sur des domaines externes. Respond.js corrigera les requêtes multimédias pour IE6-IE8.

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.js fonctionne en demandant une copie vierge de votre CSS via AJAX, donc si vous hébergez vos feuilles de style sur un CDN (ou un sous-domaine), vous devrez télécharger une page proxy pour activer la communication entre domaines.

Voir cross-domain/example.html pour une démonstration:

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your Origin domain
Reference the file(s) via <link /> element(s):

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

Si vous rencontrez des problèmes avec la configuration interdomaine, assurez-vous que respond-proxy.html ne comporte pas de chaîne de requête.

8
Craig London

Selon: https://drupal.org/node/2173441

Pour que votre site Bootstrap fonctionne sur IE8, vous devez suivre ces étapes:

  1. Installez les fichiers Respond.js à l'aide de Module Respond.js .
  2. Désactivez tout CDN pour charger les fichiers Bootstrap.
  3. Installez les fichiers Bootstrap localement à l'aide de Bootstrap Library Module .
  4. Agréger et compresser des fichiers CSS dans /admin/config/development/performance
4
ohho

Oui dans Internet Explorer 8 ou une largeur inférieure de la classe "conteneur" comme 940px. Mais dans Internet Explorer9 +, Firefox, Google Chrome, etc., la largeur de la classe "contianer" appelle 1170px.

Le même problème se retrouve également dans la Fondation Zurb.

Si nous supposons que notre client a demandé de ne pas considérer le site Web à afficher dans IE8 <, alors nous commençons à implémenter la fonctionnalité RWD de bootstrap ou de fondation zurb

2
Selva

Voici une solution sur laquelle je travaille qui fonctionne avec le framework Bones. Il pourrait être très facilement utilisé avec bootstrap.

https://github.com/gamsim/ieresponsify

2
Simon Gamble

Essayez ou suivez ceci après toutes les balises "link" de la feuille de style et juste avant la fermeture de la balise head (), cela signifie à la fin à l'intérieur de la balise "head". Ce format fonctionne à 99% sur tous les sites Web. Mais dans certains drupal bootstrap thème ne fonctionne pas.

N'oubliez pas de tout enregistrer dans le dossier local du site Web, n'utilisez pas CDN.

 <!--[if lt IE 9]>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script> 
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script>
 <![endif]-->
1
Ankur Saini

Le problème avec les charges CSS CROSS DOMAIN dans IE 8 ont été résolus comme suggéré par @ Akshay Raje et @ Craig London .

Juste pour y ajouter, respond.js ou respond.min.js doit être ajouté avant respond.proxy.js pour que la configuration fonctionne.

1
Prasoon Srivastava

Très souvent, les gens chargent CSS avec des requêtes multimédias (bootstrap et autres fichiers) à partir d'un Content Delivery Networks ( CDN , comme oss.maxcdn.com ou cdnjs.cloudflare. com). Respond.js ne fonctionne pas avec du CSS chargé en externe, vous devez donc charger votre Bootstrap CSS (ou autre CSS avec des requêtes multimédias) à partir de votre serveur.

1
TeeJay