从html5第一份草案发布至今已有八年光景,随着手机端页面的发展,html5页面越来越受人瞩目,然而html5标签在各浏览器中的兼容则是我们亟须解决的首要问题。
感谢前人的智慧,现在我们只需总结前人的经验就可以解决这个问题了。
HTML5中新增的语义化标签及属性可以让前端们非常方便的实现:清晰的WEB页面布局。再加上CSS3的效果渲染,能让页面更加赏心悦目。
了解更多html5语义化标签可以点击:浅谈HTML5如何做到语义化标签。
使用HTML5语义化标签虽然可以更方便SEO优化且代码更语义直观,但他们在IE6/IE7/IE8上并不能识别,需要进行特殊处理。以下就介绍了两种通过JavaScript处理HTML5新标签的方法:
<!--[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
作者:井井客整理来源:互联网
本文标题:解决HTML5标签不兼容的方法
本文链接:/c/12115.html