Heim > Artikel > Web-Frontend > Was soll ich tun, wenn Bootstrap IE nicht unterstützt?

Was soll ich tun, wenn Bootstrap IE nicht unterstützt?

藏色散人Original: 2021-02-05 09:12:302710Durchsuche

Die Lösung für das Problem, dass Bootstrap den IE nicht unterstützt: Stellen Sie zunächst sicher, dass am Anfang der HTML-Seite eine DOCTYPE-Anweisung steht. Rufen Sie dann die Remote-Adresse korrekt auf und markieren Sie schließlich den entsprechenden Inhalt js- oder css-Datei.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.

bootstrap hat bestimmte Kompatibilitätsprobleme mit Browsern unter IE9. Um dieses Kompatibilitätsproblem zu lösen, müssen relevante js-Dateien eingeführt und entsprechend verarbeitet werden. Der folgende Artikel stellt Ihnen die Lösung für das Problem vor, dass Bootstrap den IE nicht unterstützt. Ich hoffe, er wird Ihnen helfen.

Zunächst müssen Sie sicherstellen, dass sich am Anfang Ihrer HTML-Seite eine DOCTYPE-Deklaration befindet. DOCTYPE teilt dem Browser mit, welche Art von HTML oder Der DOCTYPE ist für das Parsen von CSS-Code und sogar JavaScript-Skripten sehr wichtig. Die aktuelle Best Practice besteht darin, die erste Zeile des HTML-Dokuments einzugeben:

<!DOCTYPE html>

Der Beitrag des Masters fasste mehrere Gründe zusammen Zunächst einmal wurde Bootstrap3 nach dem Prinzip mobiler Geräte entwickelt, daher kann es folgende Gründe geben:

1 Die Remote-Adresse wird nicht korrekt aufgerufen

Das heißt, solange es so ist liegt unter IE9, es werden zwei spezielle js aufgerufen

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Aber ich habe getestet und festgestellt, dass die Verwendung der obigen js-Datei nicht funktioniert.

Empfohlen: „

Bootstrap-Tutorial

“

2 Die Aufrufmethode ist falsch

Verwenden Sie nicht das Formular „file://“ oder „@import“, um auf „respond.min.js“ oder „respond.js“ oder auf CSS-Dateien zu verweisen3. Der Inhalt des Browsers ist markiert (verwenden Sie Meta-Tags, um den Rendering-Modus des Browsers anzupassen).

bootstrap unterstützt den IE-Kompatibilitätsmodus nicht. Damit der IE-Browser den neuesten Rendering-Modus ausführen kann, werden der Seite die folgenden Tags hinzugefügt:

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

IE=edge Dies bedeutet, dass der neueste Kernel des IE erforderlich ist verwendet. chrome=1 bedeutet, dass, wenn das Browser-Plug-in Google Chrome Frame für IE6/7/8 und andere Versionen installiert ist (es kann dazu führen, dass der Browser des Benutzers weiterhin über das Menü und die Benutzeroberfläche des IE verfügt, der Benutzer jedoch im Internet surft). Wenn tatsächlich der Chrome-Browserkernel verwendet wird, wird der Chrome-Kernel zum Rendern verwendet. Spezifische Anweisungen zu diesem Meta-Tag finden Sie in den wunderbaren Antworten auf StackOverflow. Die englische Erklärung des e8e496c15ba93d81f6ea4fe5f55a2244 Der Kernel steuert das Meta-Tag. Da es sich bei den aktuellen inländischen Mainstream-Browsern um Dual-Core-Browser handelt, wird ein Meta-Tag hinzugefügt, um dem Browser mitzuteilen, welcher Kern zum Rendern der Seite verwendet werden soll. IE8 unterstützt mehrere Attribute des Containers nicht Unterstützt box-sizing:border nicht vollständig. Box wird zusammen mit min-width, max-width, min-height oder max-height verwendet. Daher wird max-width nicht mehr für Containerklassen in Bootstrap v3.0.1 verwendet.

5. Probleme, die durch die Reihenfolge der Einführung von JS und CSS verursacht werden

Muss zuerst CSS zitieren, bevor auf js verwiesen wird

http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

6. Es gibt Leerzeilen vor und nach DOCTYPE

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Wenn Sie Bootstrap2.1.1 verwenden, kann das Problem durch Ändern von navbar-inner{filter:none} behoben werden. Weitere Informationen finden Sie unter dem Link 8. Verwenden Sie den Quirks-Modus (Kompatibilitätsmodus) )

Beim Definieren einer Webseite ist der Modus, der mit alten Browsern abwärtskompatibel ist, der Quirks-Modus, und der entsprechende „Standardmodus“ ist der Standardmodus. Schreiben Sie insbesondere 8b05045a5be5764f313ed5b9168a17e6 in das vorherige

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="js/respond.min.js"></script>

Ich habe das getestet, aber es ist nicht machbar

Schließlich habe ich den Test unter IE11 bestanden, aber als ich ihn unter IE8 getestet habe, habe ich ein Problem festgestellt Platzhalter wird nicht unterstützt

Das Folgende ist eine Methode, um das Problem der IE-Unterstützung von Platzhaltern zu lösen. Die in diesem Artikel zitierte JQuery ist 1.11.1 und hat den Test bestanden

und dann vorstellen

<!DOCTYPE html>
这里有空格也不行，要去掉空格

Laden Sie die Datei jquery.placeholder.js herunter. Adresse https://github.com/mathiasbynens/jquery-placeholder

Fügen Sie dann etwas Code zur Datei hinzu

http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8

Wenn ich hier involviert bin oder das Problem besteht immer noch ungelöst, bitte gehen Sie zu http://hustlzp.com/post/2014/01/ie8-compatibility, dort finden Sie weitere Einzelheiten

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Bootstrap IE nicht unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：So schließen Sie das Popup-Fenster im BootstrapNächster Artikel：So schließen Sie das Popup-Fenster im Bootstrap

In Verbindung stehende Artikel

Mehr sehen