Detailed introduction to the compatibility processing of HTML5 new tags (picture)

HTML5Although the new semantic tags have many benefits, there are still compatibility issues in lower versions of the old IE browser, which often makes people feel headaches. In the end Should I boldly use new tags or use a large number of traditional DIV meaningless tags? Today we will briefly take a look at the compatibility of H5 new tags.

First let’s look at a short piece of simple code:

HTML code:

    
    
 
    



header

 

Under Google browser:

IE6 browser:

Obviously, header and footer are rendered as block-level elements in browsers that support H5 new tags, while in browsers of IE8 and below It is presented as text and the style does not work, indicating that it is not supported, so how to solve it?

First of all, the first method is to use DOM operation to add these tags. Since the browser does not support it, then I will create one myself:

HTML code:

    
    
    
    



header

 

At this time, let’s take a look at the effect displayed by the IE6 browser:

The red background color can be displayed, indicating that through document.createElement () This method is feasible, so why does the width and height of the style not work? Because the added elements are inline elements, inline elements have no width and height. After understanding this, we add a "display: block;" to the header and footer in the case. Attribute and see how the effect changes.

The effect displayed by IE6 browser:

The effect displayed now is exactly the same as what we need, which means that this method can Solve the compatibility issue of H5 new tags in old IE browsers. However, another question is, if there are so many new labels, would it be too troublesome if each one had to be produced through this method?

So, we now introduce the second method, directly borrowing the js library packaged by senior Daniel---html5shiv.js

HTML code:

    
    
    
 



header


 

 

Then let’s Now directly open the IE6 browser to see the effect:

can completely achieve the effect we want, and the operation is simpler and the amount of code is less. You may also wish to use IE7 Also test it in IE8 browser.

The above is the detailed content of Detailed introduction to the compatibility processing of HTML5 new tags (picture). For more information, please follow other related articles on the PHP Chinese website!