Falls es eine Ähnlichkeit gibt, fühle ich mich geehrt. Wenn es nachgedruckt wird, geben Sie bitte an.
Workaround, um IE6, IE7, IE8, IE9, IE10, IE11 Bootstrap unterstützen zu lassen
Ich habe kürzlich eine Webseite erstellt. Ich habe immer das Gefühl gefunden, dass Bootstrap sehr gut ist. Diesmal habe ich Bootstrap3, Chrome, Firefox, Safari, Opera, 360 Browser (Geschwindigkeitsmodus), Sogou-Browser und andere Browser ohne Probleme verwendet. Und unter IE8 und IE11 konnte der Stil nicht angezeigt werden. Dann haben verschiedene Baidu das Problem schließlich mit Hilfe eines Internetnutzer-Beitrags auf Yapeng.com gelöst. Siehe auch Qianxun Learning Network. Die Lösung lässt sich wie folgt zusammenfassen:
Stellen Sie zunächst sicher, dass Ihre HTML-Seite mit einer DOCTYPE-Deklaration beginnt. DOCTYPE teilt dem Browser mit, welche HTML- oder XHTML-Spezifikation zum Parsen eines HTML-Dokuments verwendet werden soll, was die folgenden Faktoren beeinflusst:
Einschränkungen für Tags, Attribute und Eigenschaften
Beeinflusst den Rendering-Modus des Browsers, und verschiedene Rendering-Modi beeinflussen das Parsen von CSS-Code und sogar Javascrip{filter}t-Skripten im Browser
DOCTYPE ist entscheidend, und die aktuelle Best Practice ist, in die erste Zeile des HTML-Dokuments zu tippen:
<!DOCTYPE html>
Es gibt mehrere Gründe, Bootstrap zu finden, die im Beitrag des Gottes zusammengefasst werden; zunächst wurde Bootstrap3 zunächst nach dem Prinzip des mobilen Geräts entwickelt, daher können die Gründe wie folgt sein:
1. Die entfernte Adresse wird nicht korrekt aufgerufen
Das heißt, solange es IE9 oder niedriger ist, rufen Sie zwei spezielle js auf
<!-- Unterstützung von HTML5 Shim und Respond.js IE8 für HTML5-Elemente und Medienabfragen -->
<!--[wenn Lt IE 9]>
<scrip{filter}t src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></scrip{filter}t>
<scrip{filter}t src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></scrip{filter}t>
<![Endif]-->
Aber ich habe getestet und festgestellt, dass es nicht machbar ist, nur die oben genannten JS-Dateien zu verwenden.
2. Die Aufrufmethode ist falsch
Beziehen Sie sich nicht auf respond.min.js-, respond.js- oder CSS-Dateien in file:// oder @import Form
3. Identifizierung des Inhalts des Browsers (Verwendung von Meta-Tags, um die Rendering-Methode des Browsers anzupassen)
Der Bootstrap unterstützt keinen IE-Kompatibilitätsmodus, und damit IE den neuesten Rendering-Modus ausführen kann, werden folgende Tags zur Seite hinzugefügt
IE=edge bedeutet, dass der neueste IE-Kernel erzwungen ist, und chrome=1 bedeutet, dass, wenn das Browser-Plug-in Google Chrome Frame für IE6/7/8 und andere Versionen installiert ist (was den Browser des Nutzers weiterhin wie IEs Menü und Oberfläche aussehen lassen kann, der Nutzer aber tatsächlich den Chrome-Browser-Kernel beim Websurfen verwendet), dann wird der Chrome-Kernel zum Rendern verwendet. Für eine spezifische Erklärung dieses Meta-Tags siehe die großartige Antwort auf StackOverflow, und die <meta>englische Erklärung des Tag-Experten findest du hier
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Ich fügte hinzu
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Und dann hast du es
Der Kernel steuert das Meta-Tag, da die aktuellen Mainstream-Browser in China Dual-Kernel sind, daher wird das Meta-Tag hinzugefügt, um dem Browser zu sagen, welchen Kernel zur Renderung der Seite verwendet werden soll
4. IE8 unterstützt mehrere Eigenschaften von Containern nicht
IE8 unterstützt die Boxgröße nicht vollständig: Border-Box wird mit Min-Width, Max-Width, Min-Height oder Max-Height verwendet. Daher verwendet die Container-Klasse in Bootstrap v3.0.1 Max-Width nicht mehr.
5.JS Problem, das durch die Reihenfolge verursacht wird, in der CSS eingeführt wird
Man muss CSS zitieren, bevor man JS referenzieren kann
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>
6. DOCTYPE hat leere Zeilen davor und danach
<!DOCTYPE html>
Es ist nicht in Ordnung, hier Leerzeichen zu haben, du musst die Leerzeichen entfernen
<html>
7. Du kannst die bootstrap.css auch manuell modifizieren
Wenn Sie Bootstrap 2.1.1 verwenden, kann das Modifikation von navbar-inner{ filter:none} das Problem lösen. Wenn Sie Version 3.0+ verwenden, gibt es keinen Code, siehe bitte die Verbindung für Details
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Nutzen Sie den Quirks-Modus
Bei der Definition einer Webseite ist der Abwärtsmodus mit älteren Browsern der Quirks-Modus, und der entsprechende "Standardmodus" ist der Standardmodus. Genauer gesagt wird <!DOCTYPE html> wie zuvor geschrieben
<!DOCTYPE HTML ÖFFENTLICH "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Ich habe das getestet, aber es ist nicht machbar
Schließlich habe ich unter IE11 getestet, aber unter IE8 und ein Problem gefunden, dass Platzhalter nicht unterstützt wird
So löst man IEs Unterstützung für Platzhalter
Das in diesem Artikel erwähnte jquery wird in 1.11.1 getestet, und jquery wird zuerst referenziert
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Du kannst auch andere jquery-Versionen verwenden
Dann führen Sie <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t ein>
jquery.placeholder.js Download-Adresse für diese Datei https://github.com/mathiasbynens/jquery-placeholder
Dann fügen Sie etwas Code zur Datei hinzu
<scrip{filter}t type="text/javascrip{filter}t">
$(Funktion () {
Aufrufe das Plugin
$('Eingabe, Textbereich').platzhalter();
});
</scrip{filter}t>
Falls ich hier beteiligt bin oder das Problem noch nicht gelöst ist, bitte http://hustlzp.com/post/2014/01/ie8-compatibility weitere Details weitergeben
Die oben genannten IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, Opera, 360 Browser (Geschwindigkeitsmodus), Sogou Browser Test bestanden, nur IE5.5 scheint nicht machbar zu sein, kurz gesagt, das Problem ist hier gelöst, alles böse IE6 – nenn es Sojasauce
Wenn Sie jquery.placeholder.js nicht verwenden möchten, können Sie keine Platzhalter-Emulationsimplementierungen mehr in Browsern unterstützen
Sie können diesen Artikel für eine sehr detaillierte http://ju.outofmemory.cn/entry/1595 |
Veröffentlicht am 03.08.2016 22:55:23
|
|
|
Vermieter