基本上所有現代浏覽器都已經很好的支援HTML5新增的語義元素,但市面上還有許多機器認使用IE9之前的版本(比如IE8)。是以為了相容這些浏覽器,當我們使用新語義元素時,也要確定它們在這些古老的浏覽器上能正常顯示。
下面總結了三種讓舊浏覽器支援新語義的辦法。
方法1:為語義元素添加樣式
浏覽器在遇到不認識的元素時,會把它們當成内聯(inline)元素。而大多數HTML5語義元素都是塊級元素,需要單獨一行來呈現它們。
(1)首先我們可以通過一條“超級規則”,将它們顯示為塊級元素,避免它們都擠在一起。
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
(2)雖然添加了上面的樣式可以解決大多數浏覽器的相容問題。但對于較早版本的IE這樣做還不夠,它們會拒絕給無法識别的元素應用樣式。 是以我們還要通過JavaScript建立新元素,這樣可以騙過IE,讓它識别外來元素。
<script>
document.createElement('article');
document.createElement('aside');
document.createElement('figure');
document.createElement('figcaption');
document.createElement('footer');
document.createElement('header');
document.createElement('main');
document.createElement('nav');
document.createElement('section');
document.createElement('summary');
</script>
方法2:使用html5.js墊片腳本
親手寫上面的樣式還有js代碼太麻煩,我們可以直接引用html.js這個腳本。
這個腳本除了建立所有的新HTML元素,還會為它們動态應用前面提到的樣式,確定新元素能正确地顯示為塊元素。
(注意:對于html5.js的引用放在IE的條件注釋中,這樣這個腳本隻有在舊版本的IE下才會執行。)
<html>
<head>
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header>welcome to hangge.com</header>
<aside>做最好的開發者知識平台</aside>
</body>
<html>
方法3:使用Modernizr - 推薦
modernizr.js除了提供HTML5的檢測功能,還内置了HTML5墊片腳本。如果頁面已經使用了Modernizr,那就不需要再使用html5.js或者添加什麼樣式規則了。
原文出自:www.hangge.com 轉載請保留原文連結:http://www.hangge.com/blog/cache/detail_846.html