HTML5 new tag compatibility processing
HTML5’s new semantic tags have many benefits, but there are compatibility issues in older versions of Internet Explorer, often causing headaches. Should you use bold new tags or use traditional DIV tags with lots of nonsense? Today we will simply look at the compatibility of H5 new tags.
Let’s start with a bit of simple code:
HTML code:
1 <! DOCTYPE HTML > 2 < HTML > 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title> Test H5 new tag compatibility </title> 6 7 <style> 8 header, footer{width:50px; height: 50px; background-color: red; } 9 </style> 10 </head> 11 <body> 12 <header id="header">header</header> 13 <footer id="footer">footer</footer> 14 15 </body> 16 </html>Copy the codeIn Google Chrome:
In Internet Explorer 6:
Headers and footers are clearly rendered as block-level elements in browsers that support H5 tags, but rendered as text in browsers that support IE8 and below and the style does not work, indicating that they are not supported.
First, the first method is to use DOM manipulation to add these tags. Since browsers don’t support this, I’ll create my own:
HTML code:
1 <! DOCTYPE HTML > 2 < HTML > 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title> Test H5 new tag compatibility </title> 6 <script> 7 document.createElement('header'); 8 document.createElement('footer'); 9 </script> 10 <style> 11 header, footer{display: block; width:50px; height: 50px; background-color:red; } 12 </style> 13 </head> 14 <body> 15 <header id="header">header</header> 16 <footer id="footer">footer</footer> 17 18 </body> 19 </html>Copy the codeAt this point, let’s take a look at the effect of IE6:
The red background color shows up, indicating that the document.createElement() method works, so why doesn’t the width and height of the style work? Since the added element is an inline element, and inline elements have no width and height, after knowing this, we will add a “display: block;” to the header and footer in our case. Property to see what happens to the effect.
1 <style> 2 header, footer{display: block; 3 width:50px; height: 50px; 4 background-color: red; } 5 </style>Copy the codeInternet Explorer 6 displays:
Now it looks exactly as we want it to, which means that the H5 TAB is compatible with older Internet Explorer browsers. But, another question, so many new labels, if every one has to be produced this way, will it be too much trouble?
So, we now introduce the second way, directly borrow the previous daniu package good JS library – html5shiv.js
Html5shiv framework Github repository address
HTML code:
1 <! DOCTYPE HTML > 2 < HTML > 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title> Test H5 new tag compatibility </title> 6 <script src="js/html5shiv.js"></script> 7 8 </head> 9 <body> 10 <header id="header">header</header> 11 <footer Id ="footer">footer</footer> 12 <script SRC ="js/jquery-1.11.0.min.js"></script> 13 14 <script> 15 $(" # header "). The CSS (' color ', '# f00'); $(' # 16 footer '). The CSS ({' width ':' 50 px ', 'height' : '50 px, 17' border ':' # 1 px solid DDD, 18 'backgroundColor' : 'red'}); $('#header').html('h5 tag compatible '); 20 </script> 21 22 </body> 23 </html>Copy the codeSo let’s go straight to IE6 and see what it looks like:
Completely can achieve the effect we want, and the operation is more simple, less code, you may wish to also test in IE7 and IE8 browser.