Eine kurze Diskussion über die Lösung des Problems der nativen Seitenkompatibilität mit IE9

Vorwort

Vor Kurzem habe ich die native Seite eines Kunden übernommen. Der Kunde verlangt, dass die Seite mit dem Browser IE9 und höher kompatibel ist und dass auf den Kompatibilitätsmodus des 360-Browsers normal zugegriffen werden kann. Der 360-Browser kann den Hochgeschwindigkeitsmodus durch Code erzwingen und dieses Problem ist relativ einfach zu lösen. Um jedoch mit IE9 kompatibel zu sein, können viele CSS3-Eigenschaften und die neuen APIs von H5 nicht verwendet werden. Dieser Artikel fasst systematisch einige IE9-Kompatibilitätsprobleme zusammen, die bei diesem Projekt aufgetreten sind.

1. Erzwingen Sie die Verwendung des Hochgeschwindigkeitsmodus im 360-Browser

Wie wir alle wissen, verfügt der 360-Browser über zwei Zugriffsmodi: „Extremgeschwindigkeitsmodus“ und „Kompatibilitätsmodus“. Der Extremgeschwindigkeitsmodus verwendet den Blink-Kernel, einen Zweig des von Google entwickelten und im Chrome-Browser verwendeten Webkit-Kernels von Apple. Der Kompatibilitätsmodus verwendet den Trident-Kernel, den für IE-Browser verwendeten Kernel.

Um herauszufinden, welche IE-Version im Kompatibilitätsmodus kompatibel ist, können Sie im Kompatibilitätsmodus des 360-Browsers mit der rechten Maustaste auf einen leeren Bereich der Seite klicken, im Popup-Menü „Kompatibilitätsmodus wechseln“ auswählen und die spezifische IE-Version überprüfen.

Da es zwischen dem Blink-Kernel und dem Trident-Kernel erhebliche Unterschiede bei der Darstellung von Seiteninhalten gibt, werden mit moderner Front-End-Technologie erstellte Webseiten im Kompatibilitätsmodus möglicherweise nicht normal angezeigt. Um dieses Problem zu lösen, können wir den folgenden Code verwenden, um die Seite zu zwingen, im Hochgeschwindigkeitsmodus des 360-Browsers zu arbeiten und zu rendern.

<meta name="renderer" content="webkit" />

2. IE9 unterstützt CSS3

1. Layout des Boxmodells

Aus Sicht des Seitenlayouts unterscheidet sich die Berechnungsmethode des Boxmodells des Trident-Kernels von IE9 von der des Blink-Kernels, was sich hauptsächlich im Padding-Attribut des Box-Elements widerspiegelt.

Beispielsweise hat ein Div-Element auf Blockebene im Rendering eine Breite von 400 Pixeln und eine Höhe von 600 Pixeln mit einem Abstand von 20 Pixeln darum herum.

<div Klasse="Box"></div>

(1) Im Blink-Kernel wird durch das Hinzufügen von Padding zu einem Div-Blockelement das gesamte Blockelement erweitert. Um die Rendergröße des Elements beizubehalten, müssen Sie die umgebende Polstergröße von der Rendergröße abziehen. Der Code wird unten angezeigt.

.Kasten{
   Breite: 360px; // Renderbreite - linke Polstergröße - rechte Polstergröße = 400px - 20px - 20px = 360px
   Höhe: 560px; // Renderhöhe - obere Polstergröße - untere Polstergröße = 600px - 20px - 20px = 560px
   Polsterung: 20px;
}

(2) Im Trident-Kernel vergrößert das Hinzufügen von Padding zu einem Div-Blockelement nicht das gesamte Blockelement. Es ist daher nicht erforderlich, die Größe der umgebenden Polsterung abzuziehen. Der Code wird unten angezeigt.

.Kasten{
   Breite: 400px;
   Höhe: 600px;
   Polsterung: 20px;
}

Wie sollten wir angesichts der oben genannten Unterschiede das Kompatibilitätsproblem mit IE9 beim Schreiben von Code lösen?

CSS3 bietet eine Box-Sizing-Eigenschaft zum Festlegen des Layoutmodus des Boxmodells. Diese Eigenschaft wird seit IE8 unterstützt. Wenn die Box-Sizing-Eigenschaft auf Border-Box gesetzt ist, muss nach dem Hinzufügen der Padding-Eigenschaft zum Element mithilfe dieser Eigenschaft die Padding-Größe in der entsprechenden Richtung nicht von der Breite und Höhe des Effektbildes abgezogen werden.

Dann müssen wir nur die Box-Sizing-Eigenschaft aller Container auf Border-Box setzen, um den Layoutmodus des Box-Modells zu vereinheitlichen, der natürlich mit dem IE9-Browser kompatibel ist. Der Code wird unten angezeigt.

*{Boxgröße:Rahmenbox;}

Mit diesem CSS-Code können Sie problemlos ein Boxmodell-Layout erstellen, ohne die Kompatibilität berücksichtigen zu müssen.

2. IE9 unterstützt flexibles Box-Layout

IE9 unterstützt sicherlich kein flexibles Box-Layout. Am einfachsten ist es, kein Flexbox-Layout zu verwenden.

Hier möchte ich eine JS-Bibliothek namens Flex-Native vorstellen, die es IE9 ermöglicht, das flexible Flex-Box-Layout zu verwenden.

(1) Laden Sie die Flex-Native-Bibliothek auf der Seite.

<script src="https://unpkg.com/flex-native@latest"></script>

(2) Aktivieren Sie die Flex-Funktion für den Container, in dem Sie das Flexbox-Layout verwenden möchten.

.Kasten{
   display:flex; //Kompatibel mit Blink-Kernel -js-display:flex; //Kompatibel mit Trident-Kernel unter der Wirkung von Flex-Native}

(3) Andere Flex-Eigenschaften können normal verwendet werden.

3. IE9 unterstützt die folgenden CSS3-Eigenschaften nicht

(1) Textschatten
(2) transform
(3) Übergang
(4) Spalten
(5) Umriss-Offset
(6) Größe ändern
(7) Rahmenbild
(8) CSS3-Farbverlauf

4. IE9 unterstützt die folgenden CSS-Selektoren nicht

(1) ::vor
(2) ::nach
(3) ::erster-Buchstabe
(4) ::erste Zeile

3. IE9 unterstützt jQuery

Im Internet finden sich viele Kommentare zu „IE9 unterstützt nur jQuery unter Version 2.0“. Nachdem ich das Projekt abgeschlossen hatte, habe ich die jQuery-Version auf 3.5.1 aktualisiert und es hat funktioniert. Zumindest einige der von Karussells und Schiebetüren verwendeten jQuery-Selektoren und -Methoden sind verfügbar.

Wenn Sie getestet haben, welche Selektoren oder Methoden IE9 über jQuery 2.0 nicht unterstützt, fügen Sie diese bitte hinzu.

4. IE9 unterstützt das Platzhalterattribut nicht

HTML5 legt das Platzhalterattribut fest, um das Schreiben von Textplatzhaltern für Formularelemente zu erleichtern. Aber IE9 unterstützt diese Eigenschaft nicht. Die Lösung kann durch das Schreiben nativer jQuery- oder JavaScript-Skripte erreicht werden.

1. Lösung für gewöhnliches Textfeld

Implementierungsprinzip: Verwenden Sie das Wertattribut des Textfelds, um den Platzhalter zu implementieren.

(1) Wenn das Textfeld den Mausfokus erhält und der Inhalt des Textfelds der durch das Platzhalterattribut festgelegte Text ist, verschwindet der Inhalt des Textfelds.
(2) Wenn das Textfeld den Mausfokus freigibt und der Inhalt des Textfelds leer ist, wird das Textfeld auf den durch das Platzhalterattribut festgelegten Text zurückgesetzt.

Ich habe dazu natives JavaScript verwendet, Sie können aber auch jQuery verwenden, sofern dies unterstützt wird.

//Kapselung der Funktion zur Suche nach DOM-Knoten basierend auf Klassennamen Funktion $$(className){
    gibt document.getElementsByClassName(className) zurück;
}
// Die Platzhaltereigenschaft des Textfelds ist mit IE9 kompatibel
if("msDoNotTrack"in window.navigator){ //Beurteilen, ob der Browser IE9 ist
    für(var i=0;i<$$("Eingabe").Länge;i++){
        var text=$$("Eingabe")[i].getAttribute("Platzhalter");
        $$("Eingabe")[i].Wert=Text;
        $$("Eingabe")[i].addEventListener("Fokus",Funktion(){
            wenn(dieser.Wert==dieses.getAttribute("Platzhalter")){
                dieser.Wert="";
            }
        })
        $$("Eingabe")[i].addEventListener("Unschärfe",Funktion(){
            var text = this.getAttribute("Platzhalter");
            wenn(dieser.Wert==""){
                dieser.Wert=Text;
            }
        })
    }
}

2. Lösungen für Passwortdomänen

Problem: Für das Passwort-Feld kann man nicht einfach das Value-Attribut verwenden um die Platzhalterfunktion durch das Script zu simulieren, da der Wert des Value-Attributs im Passwort-Feld statt des eigentlichen Textinhaltes eine Passwortmaske aus kleinen Punkten anzeigt.

Lösung: Durch ständiges Ändern des Werts des Typattributs des Kennwortfelds wird der Standardtypwert des Kennwortfelds auf Text festgelegt, sodass der Wert des Wertattributs angezeigt werden kann.

(1) Wenn das Kennwortfeld den Mausfokus erhält, ändern Sie dessen Typattribut in „Kennwort“, um sicherzustellen, dass das vom Benutzer eingegebene Kennwort nicht gesehen werden kann.
(2) Wenn das Kennwortfeld den Mausfokus freigibt, ändern Sie dessen Typattribut in Text, um sicherzustellen, dass der Platzhaltertext angezeigt wird.

Funktion $$(Klassenname){
    gibt document.getElementsByClassName(className) zurück;
}
// Die Platzhaltereigenschaft des Textfelds ist mit IE9 kompatibel
if("msDoNotTrack" in window.navigator){    
    $$("Passwort")[0].type="text";
    $$("Passwort")[0].addEventListener("Fokus",function(){
        this.type="Passwort";
    })
    für (var i = 0; i < $$ ("Passwort"). Länge; i++) {
        var text=$$("Passwort")[i].getAttribute("Platzhalter");
        $$("Passwort")[i].value=text;
        $$("Passwort")[i].addEventListener("Fokus",function(){
            wenn(dieser.Wert==dieses.getAttribute("Platzhalter")){
                dieser.Wert="";
            }
        })
        $$("Passwort")[i].addEventListener("Unschärfe",Funktion(){
            var text = this.getAttribute("Platzhalter");
            wenn(dieser.Wert==""){
                dieser.Wert=Text;
                dieser.Typ="Text"
            }
        })
    }
}

Zusammenfassen

Diese Zusammenfassung der IE9-Kompatibilitätsprobleme muss einige Mängel aufweisen. In den folgenden Artikeln werde ich viele weitere Probleme zusammenfassen, die bei der IE9-Kompatibilität aufgetreten sind. Wenn Sie auf solche Projekte stoßen, können Sie darauf verweisen.

Damit ist dieser Artikel zur Lösung des nativen Seitenkompatibilitätsproblems mit IE9 abgeschlossen. Weitere Informationen zur nativen Seitenkompatibilität mit IE9 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!