如何让浏览器支持HTML5标签
在前端领域html5技术越来越流行了,可是还有一些浏览器不支持html5结构标签,这就让开发者非常蛋疼了。不过这也是没有办法的是,毕竟那些浏览器出生的时候要么还没有html5这回事、要么就是爹妈不愿意教他们怎么玩。今天就总结一下如何让浏览器支持html5结构标签(主要是前辈们的方法)借来一用:
一、使用Coding JavaScript 方法,不支持html5标签这种事一般都是IE8及其以下版本干的事,so:
<!--[if lt IE9]> <script> (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i= e.length; while (i--){ document.createElement(e[i]) } })() </script> <![endif]-->
或者是这种(《html5与css3权威指南》上也是使用的这种方法):
<!--[if IE]> <script> document.createElement("header"); document.createElement("footer"); document.createElement("nav"); document.createElement("article"); document.createElement("section"); </script> <![endif]-->
二、使用Google提供的html5的shiv包( 据说是推荐方法):
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
有人说这个shiv包跪了,我测试的时候还是活的,用的时候可以试一下。
以上方法都要用CSS把结构标签转换为block:
article,aside,dialog,footer,header,section,footer,nav,figure,menu{
display:block;
}
而且为了防止用户 禁用脚本,使页面出现空白要引导用户打开脚本:
<!--[if lte IE 8]> <noscript> <style>.html5-wrappers{display:none!important;}</style> <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>. </div> </noscript> <![endif]-->