How to make new elements in HTML5 compatible with old browsers

Home

Web Front-end

H5 Tutorial

How to make new elements in HTML5 compatible with old browsers_html5 tutorial tips

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

html5

A question that the teacher asked us is: How to make IE8 compatible with these tags? (You need to design the DOM in JS)

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

Copy code

The code is as follows:

< ;title>HTML5 new elements are compatible with old browsers - HTML5 freer

Top area

Article area

displays as:

|---------- --------------------Firefox--------------------------------- ------------------|

|Top area|

|Navigation area|

|Article area|

| |

|------------------------------------- -------------------------------------------------- --|

The display style in older browsers is:

------------------------- -----IE6 browser--------------------------------------------- --

---------------------------------IE8 browser------ -----------------------------------------------

It’s all the same If I am not wrong, old browsers do not recognize these newly added tags, so they use inline elements to deal with them. Therefore, one solution is to turn them into block elements so that they will not be in the The same line, so that the same effect can be displayed in both old and new browsers. Furthermore, it is to let the browser recognize the tag. The specific solution for adding new tags is:

IE8/IE7/IE6 supports document. For the tags generated by the createElement method, you can use this feature to allow these browsers to support HTML5 new tags. The code is as follows:

document.createElement('new tag'); //Add new tag

The JS code is as follows:

Copy the code

The code is as follows:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');

Or create tags directly in a 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:

Furthermore, another way is to use the framework method, using conditional comments and JS code to achieve

Copy code

The code is as follows:

You can solve the compatibility problem by directly adding this line of code. Note the

in the conditions