IE9 ist nicht mehr abwärtskompatibel mit document.createElement – ​​Javascript-Tipps

Heute habe ich festgestellt, dass die Funktionen der Seiten in IE9 und Chrome tatsächlich unterschiedlich sind, also habe ich die Konsole unter IE9 geöffnet und eine Reihe von js-Fehlern gefunden, die ich dort gefunden habe war ein Satz im Code wie dieser:

if(ie){
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
}

Ja, das Problem liegt hier: DOM-Ausnahme: INVALID_CHARACTER_ERR (5)
Weil in IE9 einige Methoden näher an die W3C-Standards herangekommen sind und mit Firefox, Chrome-Browsern usw. konsistent sind, einschließlich der Methode document.createElement hier.
Daher muss der Code hier geändert werden in:

if(ie && version < 9) {
  var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>');
} else {
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src','http://www.jb51.net');
}

Wenn dieser Meta-Tag jedoch zur Seite hinzugefügt wird, kann der Dokumentmodus von IE9 zwangsweise auf IE7 herabgestuft werden:

Dies kann diesen FEHLER umgehen, aber mein Vorschlag ist, dass Sie keine solche Kraft anwenden, wenn es auf der Seite nichts Besonderes gibt, das nicht behandelt werden kann, da dies im normalen Modus zu einigen unkontrollierbaren Phänomenen führen wird.

Hier werde ich auch einige der Unterschiede in verschiedenen IE-Versionen auflisten, an die ich mich erinnere:

1, IE6
a. Durchsichtige PNG-Bilder werden nicht unterstützt und können nur mit Filter erreicht werden
b. Die maximale Breite, maximale Höhe, minimale Breite und minimale Höhe von CSS werden nicht unterstützt
Natürlich ist alles andere ein Chaos, aber die Kompatibilität muss noch im Projekt implementiert werden!

2, IE7
a. Das Unterstützungsproblem von transparenten PNG-Bildern wurde gelöst
b. Das Problem der Unterstützung von max-width, max-height, min-width und min-height von CSS
wurde gelöst c. Der durch CSS Float verursachte Fehler wurde behoben
d. Erweiterte CSS-Selektoren unterstützen beispielsweise auch die :hover-Pseudoklasse
Obwohl es viele Probleme von IE6 löst, ist IE7 immer ein Zwischenprodukt und es gibt oft verwirrende Stilprobleme. Unter normalen Umständen ist zoom:1 allmächtig

3. IE8
a. CSS2.1-Selektoren vollständig unterstützen, an w3c anpassen und schrittweise standardisieren
b. Die Unterstützung für Ausdrücke in CSS wurde entfernt und das private Präfix -ms-
hinzugefügt In Bezug auf C und JS wird localStorage unterstützt
d. Da es viele Versionen gibt, wurde ein UA-Kompatibilitätsmodus entwickelt: X-UA-kompatibel

4, IE9
a, CSS3-Unterstützung (teilweise)
b. HTML5-Unterstützung (teilweise)
Die Leistung der Javascript-Engine ist jedoch sehr gut und spiegelt auch wider, dass einige DOM-Operationen nicht mehr abwärtskompatibel sind. Zu diesem Zeitpunkt hat IE9 die W3C-Standardisierung erreicht.

5, IE10
a. Starke Unterstützung für CSS3 und HTML5
b. Mehr -ms-private Attribute (wird es mit mehr privaten Attributen wieder in die Irre gehen? Natürlich haben Chrome und Firefox hier die Führung übernommen ... alle Arten von privaten Attributen!!!)

Kurz gesagt, als Frontend-Entwickler müssen wir Veränderungen verfolgen und uns an diese anpassen.