IE9 is no longer backward compatible with document.createElement - javascript tips

Today I found that on a website, the functions of the pages in IE9 and chrome were actually different, so I opened the console under IE9 and found a bunch of js errors. I tracked them with fiddler. It turned out that there was a sentence in the code like this:

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

Yes, the problem lies here: DOM Exception: INVALID_CHARACTER_ERR (5)
Because in IE9, some methods have moved closer to w3c standards and are consistent with firefox, chrome browsers, etc., including the document.createElement method here.
Therefore, the code here needs to be changed to:

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

However, if this meta tag is added to the page, the document mode of IE9 can be forcibly downgraded to IE7:

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

This can circumvent this BUG, ​​but my suggestion is that if there is nothing special on the page that cannot be handled, do not add such force, as it will lead to some uncontrollable phenomena in normal mode.

Here, I will also list some of the differences in various versions of IE that I remember:

1, IE6
a. PNG translucent images are not supported and can only be achieved using filter
b. The max-width, max-height, min-width, and min-height of css are not supported
Needless to say, everything else is a mess, but compatibility still needs to be implemented in the project!

2, IE7
a. Solved the support problem of png translucent images
b. Solved the problem of max-width, max-height, min-width and min-height support of css
c. Solved the bug caused by css float
d. Enhanced css selectors. For example, div nodes also support the :hover pseudo-class
Although it solves many problems of IE6, IE7 is always an intermediate product, and there are often confusing style problems. Under normal circumstances, zoom:1 is omnipotent

3. IE8
a. Fully support CSS2.1 selectors, align with w3c, and gradually standardize
b. Removed the support for expression in css and added the private prefix of -ms-
In terms of c and js, localStorage is supported
d. Since there are many versions, a UA compatibility mode has been developed: X-UA-Compatible

4, IE9
a, css3 support (partial)
b. html5 support (partial)
However, the Javascript engine was replaced by chakra. The performance is very good, and it also reflects that some DOM operations are no longer backward compatible. At this time, IE9 has achieved w3c standardization.

5, IE10
a. Strong support for css3 and html5
b. More -ms-private attributes (with more private attributes, will it go astray again? Of course, this is where chrome and firefox took the lead... all kinds of private attributes!!!)

In short, as front-end developers, we have to follow changes and adapt to these changes.