看了张鑫旭和其他博主的文章,有不使用js的解决方案,但觉得太过费事,没必要为了这个老旧浏览器,养成另一套写法,搞得前端都像是学究,在研究茴香豆的几种写法。利用js创建元素,做个腻子脚本好,损失一点老浏览器性能,对于刺激下使用新浏览器也是好事一件。
简单的办法是创建元素,然后添加css属性。如下;
(function() {
// 页面头部
var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
for (var i = 0, j = a.length; i < j; i++) {
document.createElement(a[i]);
}
})();
同理,可以用类数组转为数组:
function createHtml5Mark(){
// arguments 序列化,成为真下的数组
var args = Array.prototype.slice.call(arguments,0);
argLen = args.length,
doc = document;
// 循环数据创建元素
for(var i=0;i<argLen;i++){
doc.createElement(args[i]);
}
}
createHtml5Mark('article','aside','details','figcaption','figure','footer','header','hgroup','nav','section');
以上两种方法第一种更简便些,平日少些js,所以也补了第2种,再记忆下常用的js语句。
同时,需要在css添加属性:
section,article,nav,header,footer{display:block;}
当然,更常用的是html5shiv
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
html5shiv还提供了一些方法,再单独学习
参考链接
The HTML5 Shiv
如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题
不使用JavaScript让IE浏览器支持HTML5元素