如何让浏览器支持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]-->

 

posted @ 2015-08-02 19:08  kiscall  阅读(910)  评论(0编辑  收藏  举报