看了張?chǎng)涡窈推渌┲鞯奈恼碌挽胁皇褂胘s的解決方案,但覺(jué)得太過(guò)費(fèi)事懂盐,沒(méi)必要為了這個(gè)老舊瀏覽器褥赊,養(yǎng)成另一套寫(xiě)法,搞得前端都像是學(xué)究莉恼,在研究茴香豆的幾種寫(xiě)法拌喉。利用js創(chuàng)建元素翼岁,做個(gè)膩?zhàn)幽_本好,損失一點(diǎn)老瀏覽器性能司光,對(duì)于刺激下使用新瀏覽器也是好事一件。
簡(jiǎn)單的辦法是創(chuàng)建元素悉患,然后添加css屬性残家。如下;
(function() {
// 頁(yè)面頭部
var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
for (var i = 0, j = a.length; i < j; i++) {
document.createElement(a[i]);
}
})();
同理售躁,可以用類(lèi)數(shù)組轉(zhuǎn)為數(shù)組:
function createHtml5Mark(){
// arguments 序列化坞淮,成為真下的數(shù)組
var args = Array.prototype.slice.call(arguments,0);
argLen = args.length,
doc = document;
// 循環(huán)數(shù)據(jù)創(chuàng)建元素
for(var i=0;i<argLen;i++){
doc.createElement(args[i]);
}
}
createHtml5Mark('article','aside','details','figcaption','figure','footer','header','hgroup','nav','section');
以上兩種方法第一種更簡(jiǎn)便些,平日少些js,所以也補(bǔ)了第2種陪捷,再記憶下常用的js語(yǔ)句回窘。
同時(shí),需要在css添加屬性:
section,article,nav,header,footer{display:block;}
當(dāng)然市袖,更常用的是html5shiv
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
html5shiv還提供了一些方法啡直,再單獨(dú)學(xué)習(xí)
參考鏈接
The HTML5 Shiv
如何解決IE6/IE7/IE8瀏覽器不兼容HTML5新標(biāo)簽的問(wèn)題
不使用JavaScript讓IE瀏覽器支持HTML5元素