Comment: This article mainly introduces the solution to how the new HTML5 elements are compatible with old browsers. Friends who need it can refer to it.
One question, what the teacher has thrown to us is: How to make IE8-compatible with these tags? (Requires design of DOM in JS)Although I just talked about today, I still need to understand it.
<span> <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Compare compatibility of new HTML5 elements in old browsers - HTML5 Freedom</title>
</head>
<body>
<header>Top area</header>
<nav>Navigation Area</nav>
<article>Article Area</article>
<footer>Bottom area</footer>
</body>
</html></span>
In browsers that support HTML5 tags, it appears as:
|------------------------------------------------------------------------------------------------------------------------------
|Top area|
|Navigation area|
|Article Area |
| |
|------------------------------------------------------------------------------------------------------------------------------
The display style in the old browser is:
--------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------
All have the same effect. If you are not wrong, the old browser does not recognize these newly added tags, so they are all solved by using in-line elements. Therefore, there is a breakthrough in the solution to make it become a block element and will not be in the same line. In this way, the same effect can be displayed in both new and old browsers. In addition, the browser recognizes the tag. The specific solution to the need to add new tags is:
IE8/IE7/IE6 supports tags generated through document.createElement method. This feature can be used to enable these browsers to support HTML5 new tags. The code is as follows:
document.createElement('New Tag'); //Add to create a new tag
The JS code is as follows:
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
Or create tags directly by looping:
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])
}
CSS style setting default style:
<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, using conditional comments and JS code to implement it
<span><!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]--></span>
Just add this code to achieve compatibility issues, regarding the conditional attention
<!--if lt IE9>
It is to determine whether it is less than IE9 or below. If it is, execute this JS code. If it is not, ignore it. As for the link in JS, you can find out by opening it directly and checking it out. It is also a large piece of code.