解决HTML5标签不兼容的方法

从html5第一份草案发布至今已有八年光景，随着手机端页面的发展，html5页面越来越受人瞩目，然而html5标签在各浏览器中的兼容则是我们亟须解决的首要问题。

感谢前人的智慧，现在我们只需总结前人的经验就可以解决这个问题了。

HTML5中新增的语义化标签及属性可以让前端们非常方便的实现：清晰的WEB页面布局。再加上CSS3的效果渲染，能让页面更加赏心悦目。

了解更多html5语义化标签可以点击：浅谈HTML5如何做到语义化标签。

使用HTML5语义化标签虽然可以更方便SEO优化且代码更语义直观，但他们在IE6/IE7/IE8上并不能识别，需要进行特殊处理。以下就介绍了两种通过JavaScript处理HTML5新标签的方法：

1、使用Google的html5shiv包

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

考虑到国内访问谷歌服务器时会出现打不开的情况，建议使用百度的CDN（你可以把html5的js文件放在自己的服务器访问）。

<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

仅需添加上面的代码就能轻松使HTML5标签兼容IE各浏览器的问题，非常方便简单，推荐使用！

需要注意的是这段代码必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

而当IE6/IE7/IE8用户禁用脚本时，页面就会变成无样式的“白板”网页，这时我们该怎么解决呢？

我们可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用HTML4标签替换HTML5标签。

<!--[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]-->

通过隐藏页面其它内容而仅显示这句提示文字，可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

2、使用Coding JavaScript

<!--[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]-->

如果是IE9以下的IE浏览器将创建HTML5标签，这样非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。

原文链接：http://www.cnblogs.com/Capricornus/archive/2013/03/26/2982122.html

文章TAG：HTML5

2016.05.12作者：井井客整理来源:互联网
本文标题：解决HTML5标签不兼容的方法
本文链接：/c/12115.html

上一篇：select元素做到IE7/IE6高度兼容的几种方法
下一篇：我所遇到的@media scree不起作用的原因