HTML5新的語意標籤儘管有很多的好處，但是在低版本的老IE瀏覽器中還是存在兼容性問題的，常常讓人感到頭疼，到底是大膽的使用新標籤還是使用傳統的大量的DIV無義標籤？今天就簡單的來看看H5新標籤的兼容性處理方式。
首先來看一小段簡單的程式碼：
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试H5新标签兼容性</title>
<style>
header, footer{width:50px; height: 50px; background-color: #f00;}
</style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
</body>
</html>Google瀏覽器下：
IE6瀏覽器下：
很明顯，header和footer在支援H5新標籤的瀏覽器下已區塊級元素呈現，而在IE8及以下的瀏覽器中以文字呈現並且樣式沒有起作用，說明不被支持，那該如何解決呢？
首先，第一種方法便是使用DOM操作來新增這些標籤，既然瀏覽器不支持，那我自己來建立一個：
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试H5新标签兼容性</title>
<script>
document.createElement('header');
document.createElement('footer');
</script>
<style>
header, footer{display: block; width:50px; height: 50px; background-color: #f00;}
</style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
</body>
</html>這時候，我們再來看看IE6瀏覽器顯示的效果：
#紅色的背景色可以顯示出來了，說明透過document.createElement ()這方法是可行的，那為什麼樣式的寬高不起作用呢？因為加入的元素是內嵌元素，內嵌元素是沒有寬高的，在了解這一點以後，我們再給案例中的header和footer加上一個"display: block;"屬性，看看效果會有什麼改變。
<style>
header, footer{display: block;
width:50px; height: 50px;
background-color: #f00;}
</style>IE6瀏覽器顯示的效果：
現在顯示的效果跟我們需要的就完全一樣了，也就是說透過這種方法可以解決H5新標籤在舊IE瀏覽器中的相容問題。但是，另外一個問題，那麼多的新標籤，如果每個都要透過這種方法去生產的話，是不是太麻煩了呢？
所以，我們現在介紹第二種方式，直接借用前輩大牛封裝好的js庫--- html5shiv.js
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试H5新标签兼容性</title>
<script src="js/html5shiv.js"></script>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$('#header').css('color','#f00');
$('#footer').css({'width':'100px','height':'100px',
'border':'1px solid #ddd',
'backgroundColor':'#f00'});
$('#header').html('我是一只小小鸟');
</script>
</body>
</html>那我們現在直接開啟IE6瀏覽器看效果：
完全可以實現我們想要的效果，而且操作更加的簡單，程式碼量更少，大家不妨也可以在IE7和IE8瀏覽器中也測試一下。
以上是詳細介紹HTML5新標籤的兼容性處理（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
