How are the new elements in HTML5 compatible with old browsers? What are the methods

Time:2022-5-1

A question that the teacher threw to us is: how to make IE8 compatible with these labels? (DOM in JS needs to be designed)

Although I just talked about today, I still need to understand it.

Copy code

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 Freelander < / 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 is displayed as:

|——————————Firefox browser——————————————–|

|Top area|

|Navigation area|

|Article area|

| |

|—————————————————————————————–|

In the old version of the browser, the display style is:

——————————IE6 browser——————————————–
 
——————————IE8 browser——————————————–
 
All have the same effect. If you’re right, the old browsers don’t recognize these new tags, so they all use in-line elements to deal with them. Therefore, the breakthrough of one solution is to make it become a block element, so it won’t be in the same line. In this way, the same effect can be displayed in the new and old browsers. In addition, let the browser recognize the tags. It needs to add tags. The specific solution is:

IE8 / IE7 / IE6 support through document The tag generated by the createElement method can be used to make these browsers support HTML5 new tags. The code is as follows:

document. CreateElement (‘New label ‘); // Add create new label

JS code is as follows:

Copy code

The code is as follows:

<script>
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘article’);
document.createElement(‘footer’);
</script>

Or create labels in a direct loop:

Copy code

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])
}

CSS style setting default style:

Copy code

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, using conditional comments and JS code

Copy code

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 adding this sentence of code can realize the compatibility problem, which is in the condition note

<!–if lt IE9>

Is to judge whether it is smaller than browsers below IE9. If so, execute this JS code. If not, ignore it. As for the link in JS, just open it and have a look. It’s also a large piece of code.