HTML5新的語義標簽盡管有很多的好處，但是在低版本的老IE瀏覽器中還是存在兼容性問題的，常常讓人感到頭疼，到底是大膽的使用新標簽還是使用傳統的大量的DIV無義標簽？今天就簡單的看看H5新標簽的兼容性處理方式。
首先來看一小段簡單的代碼：
HTML代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>測試H5新標簽兼容性</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>
Google瀏覽器下：
IE6瀏覽器下：
很明顯，header和footer在支持H5新標簽的瀏覽器下已塊級元素呈現，而在IE8及以下的瀏覽器中以文本呈現並且樣式沒有起作用，說明不被支持，那如何解決呢？
首先，第一種方法便是使用DOM操作來添加這些標簽，既然瀏覽器不支持，那我自己來創建一個：
HTML代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>測試H5新標簽兼容性</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>
這時候，我們再來看看IE6瀏覽器顯示的效果：
紅色的背景色可以顯示出來了，說明通過document.createElement()這一方法是可行的，那為什么樣式的寬高不起作用呢？因為添加的元素是內聯元素，內聯元素是沒有寬高的，在了解這一點以后，我們再給案例中的header和footer添加一個"display: block;"屬性，看看效果會有什么變化。
1 <style> 2 header, footer{display: block; 3 width:50px; height: 50px; 4 background-color: red;} 5 </style>
IE6瀏覽器顯示的效果：
現在顯示的效果跟我們需要的就完全一樣了，也就是說通過這種方法可以解決H5新標簽在老IE瀏覽器中的兼容問題。但是，另外一個問題，那么多的新標簽，如果每個都要通過這種方法去生產的話，是不是太麻煩了呢？
所以，我們現在介紹第二種方式，直接借用前輩大牛封裝好的js庫 --- html5shiv.js
HTML代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>測試H5新標簽兼容性</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‘).css('color','#f00'); 16 $(‘#footer‘).css({'width':'50px','height':'50px', 17 'border':'1px solid #ddd', 18 'backgroundColor':'red'}); 19 $('#header').html('h5標簽兼容'); 20 </script> 21 22 </body> 23 </html>
那我們現在直接打開IE6瀏覽器看效果：
完全可以實現我們想要的效果，而且操作更加的簡單，代碼量更少，大家不妨也可以在IE7和IE8瀏覽器中也測試一下。