Warum zeigt IE8 die mobile Version von Twitter Bootstrap 3 auf dem Desktop an und wie kann ich das Problem beheben?

IE8 mit Twitter Bootstrap 3

Auf dieser Webseite untersuchen wir das Problem der Verwendung von Twitter Bootstrap 3 mit dem IE8-Browser.

IE8-Problem Beschreibung

Der betreffende Benutzer ist auf ein Problem bei der Verwendung von Twitter Bootstrap 3 auf einer Website gestoßen. Während die Website in allen anderen erforderlichen Browsern ordnungsgemäß funktionierte, zeigte IE8 Elemente aus der mobilen Version von Bootstrap an, die sich über den gesamten Bildschirm des Desktops erstreckten.

Der Benutzer identifizierte das Problem darin, dass IE8 bei Twitter das Mobile-First-Design bevorzugt Bootstrap. Darüber hinaus wurden die CSS-Eigenschaften mit maximaler Breite nicht wie beabsichtigt von der Containerklasse übernommen.

Lösung

Um dieses Problem zu beheben, Der Benutzer muss die Bibliothek „respond.js“ verwenden, die die Unterstützung von Medienabfragen in IE8 ermöglicht. Dies liegt daran, dass Bootstrap Medienabfrageunterstützung benötigt, um ordnungsgemäß zu funktionieren.

Schritte zur Implementierung der Lösung

1. Fügen Sie die folgenden Zeilen in die ein Kopfabschnitt Ihres HTML-Dokuments:

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

2. Ersetzen „path/to/respond.min.js“ mit dem tatsächlichen Pfad zur Bibliothek „respond.min.js“.
3. Alternativ können Sie das folgende CSS in den Kopfabschnitt einbinden, um auf IE8 und darunter abzuzielen:

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

4. Darüber hinaus können Sie eine lokale Kopie der Datei „bootstrap.css“ verwenden, anstatt von einem CDN aus darauf zu verlinken „respond.js“ funktioniert nur für lokale Dateien.

Zusätzliche Informationen

• Weitere Informationen finden Sie unter: https:/ /getbootstrap.com/getting-started/#support, insbesondere der Abschnitt zur IE8-Unterstützung mitrespond.js.
• Siehe: Weitere Informationen zur „respond.js“-Bibliothek finden Sie unter https://github.com/scottjehl/Respond.

Das obige ist der detaillierte Inhalt vonWarum zeigt IE8 die mobile Version von Twitter Bootstrap 3 auf dem Desktop an und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!