Pourquoi mon site Twitter Bootstrap 3 affiche-t-il des éléments mobiles dans IE8 sur un ordinateur de bureau ?

IE8 avec Twitter Bootstrap 3 Issue

Description du problème

Twitter Bootstrap 3 affiche le site mobile éléments dans IE8, malgré son exécution sur un ordinateur de bureau. Le problème semble provenir du fait que IE8 a sélectionné la version mobile, probablement en raison de la conception axée sur le mobile de Bootstrap. De plus, la classe conteneur ne semble pas appliquer correctement les propriétés CSS de largeur maximale.

Code HTML

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown"></span>
                    <ul class="dropdown-menu">
                        ...
                    </ul>
                </div>
                ...
                <div class="topNav">
                    <ul class="hidden-sm">
                        ...
                        <li>
                            <a href="#">
                                <button type="button" class="btn btn-default">Where to Buy</button>
                            </a>
                        </li>
                    </ul>
                </div>
                ...
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">
            ...
            <div class="navi">
                <div class="navbar">
                    <div class="container">
                        ...
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                ...
                                <li>
                                    <a href="#">
                                        <button type="button" class="btn btn-default">Where to Buy</button>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

Code CSS

.container {
    max-width: 960px;
}

Réponse

Le problème se pose car le code utilise des fichiers CSS hébergés sur CDN, qui ne sont pas compatibles avec Respond.js d'IE8 pour activer la prise en charge des requêtes multimédias.

Solution

Pour résoudre le problème, suivez ces étapes :

1. Utilisez des copies locales des fichiers CSS Bootstrap au lieu de celles hébergées sur CDN ones.
2. Assurez-vous que le code HTML contient les lignes suivantes dans le champ rubrique :

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

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!