IE9 n'est plus rétrocompatible avec document.createElement - astuces javascript

Aujourd'hui, j'ai découvert que sur un site Web, les fonctions des pages dans IE9 et Chrome étaient en fait différentes, j'ai donc ouvert la console sous IE9 et j'ai trouvé un tas d'erreurs js que je les ai suivies avec fiddler. était une phrase dans le code comme celle-ci :

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

Oui, le problème réside ici :

Exception DOM : INVALID_CHARACTER_ERR (5)
Car dans IE9, certaines méthodes se sont rapprochées des standards du w3c et sont cohérentes avec Firefox, les navigateurs Chrome, etc., y compris la méthode document.createElement ici. Par conséquent, le code ici doit être modifié par :

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');
}

Cependant, si cette balise méta est ajoutée à la page, le mode document d'IE9 peut être rétrogradé de force vers IE7 :

Cela peut contourner ce BUG, ​​​​mais ma suggestion est que s'il n'y a rien de spécial sur la page qui ne peut pas être géré, n'ajoutez pas une telle force, car cela entraînerait des phénomènes incontrôlables en mode normal.

Ici, je vais également énumérer certaines des différences entre les différentes versions d'IE dont je me souviens :

1, IE6 a. Les images translucides PNG ne sont pas prises en charge et ne peuvent être obtenues qu'à l'aide d'un filtre
b. La largeur maximale, la hauteur maximale, la largeur minimale et la hauteur minimale de CSS ne sont pas prises en charge
Inutile de dire que tout le reste est un gâchis, mais la compatibilité doit encore être implémentée dans le projet !

2, IE7 a. Résolu le problème de support des images translucides png
b. Résolu le problème de la prise en charge de la largeur maximale, de la hauteur maximale, de la largeur minimale et de la hauteur minimale du CSS
c. Résolu le bug causé par CSS float
d. Sélecteurs CSS améliorés Par exemple, les nœuds div prennent également en charge la pseudo-classe :hover
. Bien qu'il résolve de nombreux problèmes d'IE6, IE7 est toujours un produit intermédiaire, et il y a souvent des problèmes de style déroutants. Dans des circonstances normales, zoom:1 est tout-puissant
.

3.IE8 a. Prend entièrement en charge les sélecteurs CSS2.1, s'aligne sur le w3c et standardise progressivement
b. Suppression de la prise en charge de l'expression en CSS et ajout du préfixe privé de -ms-
En termes de c et js, localStorage est pris en charge
d. Comme il existe de nombreuses versions, un mode de compatibilité UA a été développé : X-UA-Compatible

4, IE9
a, prise en charge CSS3 (partielle) b. Prise en charge de HTML5 (partielle)
Cependant, le moteur Javascript a été remplacé par chakra. Les performances sont très bonnes et cela reflète également que certaines opérations DOM ne sont plus rétrocompatibles. À l'heure actuelle, IE9 a atteint la standardisation w3c.

5, IE10 a. Forte prise en charge de CSS3 et HTML5
b. Plus d'attributs -ms-private (avec plus d'attributs privés, est-ce que ça va encore s'égarer ? Bien sûr, c'est là que chrome et Firefox ont pris les devants... toutes sortes d'attributs privés !!!)

En bref, en tant que développeurs front-end, nous devons suivre les changements et nous adapter à ces changements.