井井客

搜索

解决HTML5标签不兼容的方法

从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

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

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

文章分类

相关阅读

随便看看