天天看點

HTML5 - 讓老浏覽器支援新語義元素的幾種方法

基本上所有現代浏覽器都已經很好的支援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

繼續閱讀