Comments: This article mainly introduces how HTML5 new elements are compatible with old browsers. If you need them, refer to the following question. What the teacher threw to us is: how to Make IE8 compatible with these labels? (DOM in JS needs to be designed)
Although I have just mentioned the content today, I still need to explain it.
The Code is as follows:
<Span style = "font-size: 14px; color: # FF6666;"> <! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> compatibility of HTML5 new elements in old browsers-HTML5 freetier </title>
</Head>
<Body>
<Header> top area <Nav> navigation area </nav>
<Article> article area </article>
<Footer> bottom area </footer>
</Body>
</Html> </span>
In a browser that supports HTML5 labels, the following information is displayed:
| ------------------------------ Firefox browser -------------------------------------------- |
| Top area |
| Navigation area |
| Article area |
|
| Bytes |
In the old browser, the display style is:
------------------------------ IE6 browser --------------------------------------------
------------------------------ IE8 browser --------------------------------------------
The results are the same. If there is no estimation, the old browsers do not recognize these new tags, so they are all handled by line elements. Therefore, there is a breakthrough in the solution, that is, it will not be in the same line if it becomes a block element, so that the same effect can be displayed in both the new and old browsers, and the browser will be able to identify tags, the specific solution to adding tags is as follows:
IE8, IE7, and IE6 support tags generated using the document. createElement method. This feature allows these browsers to support HTML5 new tags. The Code is as follows:
Document. createElement ('new tag'); // creates a new tag.
The JS Code is as follows:
The Code is as follows:
<Script>
Document. createElement ('header ');
Document. createElement ('nav ');
Document. createElement ('Article ');
Document. createElement ('footer ');
</Script>
Or create tags in a direct loop:
The Code is as follows:
Var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video ". split (',');
Var I = e. length;
While (I --){
Document. createElement (e [I])
}
Set the default CSS style:
The Code is as follows:
<Style>
Article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
Display: block;
}
</Style>
Another way is to use the framework method, and use conditional annotations and JS Code for implementation.
The Code is as follows:
<Span style = "font-size: 14px; color: # FF6666;"> <! -- [If lt IE 9]>
<Script> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [Endif] --> </span>
Directly add this code to implement compatibility issues.
<! -- If lt IE9>
Is to determine whether the browser is less than IE9, if it is to execute this JS Code, if not, it will be ignored. As for the link in JS, you can simply open it and see it. It is also a large piece of code.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
