HTML5 compatibility handling of new tags

HTML5 New Semantic tags despite a lot of benefits, but in the older version of the old IE browser is still a compatibility problem, often people feel headache, in the end is bold to use the new label or use a large number of traditional div nonsense tags? Just look at the compatibility of H5 new tags today.

Let's start with a short piece of code:

HTML code :

<! DOCTYPE html>
Under Google Browser:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M01/86/07/wKioL1ey2Cri3NrNAAACpEaHj8A196.png-wh_500x0-wm_3 -wmp_4-s_939665274.png "title=" 1.png "width=" "height=" 182 "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:100px; height:182px; "alt=" Wkiol1ey2cri3nrnaaacpeahj8a196.png-wh_50 "/>
Under IE6 Browser:
650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M02/86/07/wKiom1ey1n_Cs1FUAAAS0_1tD9Y651.png-wh_500x0-wm_3 -wmp_4-s_831006769.png "title=" 2.png "width=" 223 "height=" "border=" 0 "hspace=" 0 "vspace=" 0 "style=" WIDTH:223PX; height:100px; "alt=" Wkiom1ey1n_cs1fuaaas0_1td9y651.png-wh_50 "/>
Obviously, headers and footer are rendered as block-level elements under browsers that support H5 new tags, and are rendered as text in the browser IE8 and below, and the styles do not work, stating that they are not supported.

First, the first approach is to use DOM actions to add these tags, since browsers don't support it, I'll create one myself:
HTML code :
<! DOCTYPE html>
At this point, let's take a look at the effect that IE6 browser displays:
650) this.width=650; "Src=" Http://s5.51cto.com/wyfs02/M01/86/08/wKiom1ey2XDCbBiOAAASnur8QPI076.png-wh_500x0-wm_3 -wmp_4-s_377683893.png "title=" 3.png "width=" "height=" "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:200px; height:80px; "alt=" Wkiom1ey2xdcbbioaaasnur8qpi076.png-wh_50 "/>
The red background color can be displayed, indicating that it is possible to pass the Document.createelement () method, so why is the width of the style not working? Since the added element is an inline element, the inline element is not wide, and after understanding this, we add a "display:block" to the header and footer in the case. Properties to see how the effect will change.
<style> header, Footer{display:block; width:50px;                    height:50px; Background-color: #f00;} </style>
IE6 the effect that the browser displays:
650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M02/86/08/wKiom1ey2uKhUZ0fAAAUoDgY2_c371.png-wh_500x0-wm_3 -wmp_4-s_3991177780.png "title=" 4.png "width=" "height=" 174 "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:200px; height:174px; "alt=" Wkiom1ey2ukhuz0faaauodgy2_c371.png-wh_50 "/>
Now the effect is exactly the same as what we need, which means that this method can solve the compatibility problem of H5 new tag in old IE browser. But, another problem, so many new tags, if each to be produced through this method, is not too much trouble?

So, we now introduce the second way, directly borrowed from the predecessor Daniel Packaged JS Library---html5shiv.js
HTML code:
<! Doctype html>
So now we open the IE6 browser to see the effect:
650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M02/86/08/wKiom1ey3GazUPc6AAAVcCDqk0M824.png-wh_500x0-wm_3 -wmp_4-s_3121195227.png "title=" 5.png "width=" "height=" 172 "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:200px; height:172px; "alt=" Wkiom1ey3gazupc6aaavccdqk0m824.png-wh_50 "/>

We can achieve the results we want, and the operation is more simple, the code is less, you might as well in IE7 and IE8 browser also tested.
This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1839298
HTML5 compatibility handling of new tags