Pourquoi IE8 affiche-t-il la version mobile de Twitter Bootstrap 3 sur le bureau et comment puis-je y remédier ?

IE8 avec Twitter Bootstrap 3

Dans cette page Web, nous explorerons le problème de l'utilisation de Twitter Bootstrap 3 avec le navigateur IE8.

Problème IE8 Description

L'utilisateur en question a rencontré un problème lors de l'utilisation de Twitter Bootstrap 3 sur un site Web. Alors que le site Web fonctionnait correctement dans tous les autres navigateurs requis, IE8 affichait des éléments de la version mobile de Bootstrap, répartis sur tout l'écran du bureau.

L'utilisateur a identifié le problème car IE8 privilégiait la conception mobile sur Twitter. Bootstrap. De plus, les propriétés CSS de largeur maximale n'étaient pas extraites par la classe conteneur comme prévu.

Solution

Pour résoudre ce problème, l'utilisateur doit utiliser la bibliothèque respons.js, qui permet la prise en charge des requêtes multimédias dans IE8. En effet, Bootstrap nécessite la prise en charge des requêtes multimédias pour fonctionner correctement.

Étapes pour implémenter la solution

1. Incluez les lignes suivantes dans le section head de votre document HTML :

<!--[if lt IE 9]>
  <script src="path/to/respond.min.js"></script>
<![endif]-->

2. Remplacer "path/to/respond.min.js" avec le chemin réel vers la bibliothèque respons.min.js.
3. Vous pouvez également inclure le CSS suivant dans la section head pour cibler IE8 et ci-dessous :

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .container {
    max-width: none;
  }
}

4. De plus, vous pouvez utiliser une copie locale du fichier bootstrap.css au lieu de créer un lien vers celui-ci à partir d'un CDN, comme Response.js ne fonctionne que pour les fichiers locaux.

Informations supplémentaires

• Pour plus d'informations, visitez : https:/ /getbootstrap.com/getting-started/#support, en particulier la section sur la prise en charge d'IE8 à l'aide de respons.js.
• Voir : https://github.com/scottjehl/Respond pour plus d'informations sur la bibliothèque respons.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!