Heim > Web-Frontend > CSS-Tutorial > Warum zeigt meine Twitter Bootstrap 3-Site mobile Elemente in IE8 auf einem Desktop an?

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

Patricia Arquette
Freigeben: 2024-12-15 02:33:16
Original
430 Leute haben es durchsucht

Why Does My Twitter Bootstrap 3 Site Display Mobile Elements in IE8 on a Desktop?

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>
Nach dem Login kopieren

CSS-Code

.container {
    max-width: 960px;
}
Nach dem Login kopieren

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]-->
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage