Warum zeigt meine Twitter Bootstrap 3-Site mobile Elemente in IE8 auf einem Desktop an?

IE8 mit Twitter Bootstrap 3-Problem

Problembeschreibung

Twitter Bootstrap 3 zeigt mobile Website an Elemente in IE8, obwohl es auf einem Desktop ausgeführt wird. Das Problem scheint darauf zurückzuführen zu sein, dass IE8 die mobile Version ausgewählt hat, möglicherweise aufgrund des Mobile-First-Designs von Bootstrap. Darüber hinaus scheint die Containerklasse CSS-Eigenschaften mit maximaler Breite nicht korrekt anzuwenden.

HTML-Code

<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>

CSS-Code

.container {
    max-width: 960px;
}

Antwort

Das Problem tritt auf weil der Code CDN-gehostete CSS-Dateien verwendet, die nicht mit Respond.js von IE8 kompatibel sind, um die Unterstützung von Medienabfragen zu ermöglichen.

Lösung

Um das Problem zu beheben, folgen Sie den Anweisungen Diese Schritte:

1. Verwenden Sie lokale Kopien von Bootstrap-CSS-Dateien anstelle von CDN-gehosteten
2. Stellen Sie sicher, dass der HTML-Code die folgenden Zeilen im enthält. Abschnitt:

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

Das obige ist der detaillierte Inhalt vonWarum zeigt meine Twitter Bootstrap 3-Site mobile Elemente in IE8 auf einem Desktop an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!