HTML5新標籤的相容性處理

html5新的語義標籤儘管有很多的好處，但是在低版本的老ie瀏覽器中還是存在相容性問題的，常常讓人感到頭疼，到底是大膽的使用新標籤還是使用傳統的大量的div無義標籤？今天就簡單的看看h5新標籤的相容性處理方式。

首先來看一小段簡單的**：

html**：

1
doctype html
>
2<
html
>
3<
head 
lang
="en"
>
4<
meta 
charset
="utf-8"
>
5<
title
>測試h5新標籤相容性
title
>67
<
style
>
8header, footer
9style
>
10head
>
11<
body
>
12<
header 
id="header"
>header
header
>
13<
footer 
id="footer"
>footer
footer
>
1415
body
>
16html
>

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
>
7document.createelement('header');
8document.createelement('footer');
9script
>
10<
style
>
11header, footer
12style
>
13head
>
14<
body
>
15<
header 
id="header"
>header
header
>
16<
footer 
id="footer"
>footer
footer
>
1718
body
>
19html
>

這時候，我們再來看看ie6瀏覽器顯示的效果：

紅色的背景色可以顯示出來了，說明通過document.createelement()這一方法是可行的，那為什麼樣式的寬高不起作用呢？因為新增的元素是內聯元素，內聯元素是沒有寬高的，在了解這一點以後，我們再給案例中的header和footer新增乙個"display: block;"屬性，看看效果會有什麼變化。

1
<
style
>
2header, footer
5style
>

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
>78
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
>
1314
<
script
>
15$(『#header『).css('color','#f00');
16$(『#footer『).css();
19$('#header').html('h5標籤相容');
20script
>
2122
body
>
23html
>

那我們現在直接開啟ie6瀏覽器看效果：

完全可以實現我們想要的效果，而且操作更加的簡單，**量更少，大家不妨也可以在ie7和ie8瀏覽器中也測試一下。

HTML5新標籤的相容性處理

HTML5新標籤的相容性處理

HTML相容性處理

html5 標籤新特性

HTML5新標籤的相容性處理

HTML5新標籤的相容性處理

HTML相容性處理

html5 標籤新特性

相關推薦