Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to make the following version of IE9 understand the html5 element". In the daily operation, I believe many people have doubts about how to make the following version of IE9 understand the html5 element. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to make the following version of IE9 understand the html5 element". Next, please follow the editor to study!

Each browser has a list of the HTML elements it supports. Elements that are not on the list are treated as unknown elements. Browsers do not set any styles for unknown elements (different browsers have different default styles for elements). In previous versions of IE9, unknown elements could not be styled. The DOM of the unknown element also appears incorrect, and IE inserts an empty node with no child elements in the DOM. All elements that you thought would be children of this unknown element will become their sibling nodes.

There is a remedy to this problem. Create a fake article element with js before using article tags, and IE will recognize this element and support styling with css. This fake element doesn't even need to be inserted into the DOM.

Take a look at the following example:

Copy the code

The code is as follows:

Unknown elements

Article {display:block;border:1px solid red}

Welcome to feimos's blog

This is your first time to visit this webSite.

IE6 does not recognize article, so it does not have a red border.

The effect of html5 under IE6

But if we add a word js to head, the situation will be different immediately.

Copy the code

The code is as follows:

Document.createElement ("article")

IE6 pretended that it recognized the element and showed the effect correctly.

Correct effect of html5 under IE6

We can create a fake copy of all the new HTML5 elements at once, so we don't have to worry about browsers that don't support HTML5 well. Remy Sharp's HTML5 enabling script helps us do these things, and the basic idea of the script is as follows:

Copy the code

The code is as follows:

First, use conditional comments to determine whether it is a previous version of IE9, and if so, execute js. First write all the new tags into the e array, then traverse the entire array and create a copy.

The script is already hosted on Google Project Hosting, so you can link it directly:

Copy the code

The code is as follows:

In addition, this script needs to be placed at the beginning of the page, preferably in head, not at the bottom. In this way, IE will run this code before parsing the page tag.

At this point, the study on "how to make the following versions of IE9 understand html5 elements" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.