IE9 + is no longer compatible with document. createElement.

IE9 + is no longer compatible with document. createElement.

Today, I found a website with different page functions in IE9 and chrome. So I opened the console in IE9 and found a bunch of js errors. I tracked them with fiddler, the original Code contains the following:

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

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

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

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">

In this way, we can bypass this BUG. However, my suggestion is that if there is no special issue that cannot be handled on the page, do not add such a rule, which will lead to uncontrollable phenomena in normal mode.

Here, I also comment on the differences between different IE versions that I have noticed:

1. IE6
A. png translucent images are not supported and can only be implemented using filters.
B. css's max-width, max-height, min-width, and min-height are not supported.
It's a mess, but the project must be compatible!

2. IE7
A. Solved the support problem of png translucent Images
B. Solved the support for max-width, max-height, min-width, and min-height of css.
C. Fixed the bug caused by css float.
D. Enhance the css selector. For example, the div Node also supports the hover pseudo class.
Although IE6 has solved many problems, IE7 has always been an intermediate product. In many cases, style issues that are confusing may occur. In general, zoom: 1 is omnipotent.

3. IE8
A. the selector that fully supports css2.1 should be aligned with w3c and gradually standardized.
B. removed expression support in css, and added the private prefix of-ms -.
C and js support localStorage
D. Because there are many versions, a UA compatibility mode is developed: X-UA-Compatible

4. IE9
A. Support for css3 (Part 1)
B. html5 support (partial)
However, the Javascript engine has been replaced with chakra, and the performance is very good. It also shows that some DOM operations are no longer backward compatible. At this time, IE9 has been standardized by w3c.

5. IE10
Strong support for a, css3, and html5
B. More-ms-Private attributes (will they be biased when there are more private attributes? Of course, this is chrome and firefox taking the lead... Various private attributes !!!)

In short, we have to follow the changes to adapt to these changes.