IE9 + is no longer backward compatible with document. createElement _ javascript skills

Source: Internet
Author: User
This article mainly introduces that IE9 + has no document. createElement downward compatible solution. If you need a friend, you can refer to the following today and find that the functions on the pages of IE9 and chrome are different. Therefore, open the console under IE9, I found a bunch of js errors and tracked them with fiddler. The original Code contains the following sentence:

if(ie){  var iframe = document.createElement('');}

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

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 p 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.