IE9以下浏览器兼容HTML 5新标签

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2013/3/28

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
这就意味着:IE6、7、8都不支持了。同时IE9也是支持一点点HTML5,下边我会就IE怎么不支持HTML5发图证明一下(因为即使浏览器不支持HTML5,那么页面表现形式上也是没什么差别的(部分标签,样式有出入而已))。

看看别人是怎么支持IE兼容HTML标签的。

原来淘宝是用了一个简单的js来实现的功能(在head标签内用javascript创造一个标签):

<script>document.createElement_x('section');</script>

就这样一个简单的代码,section标签就创建完成!只需要在网页中加一个判断句然后执行上面这行代码就可以了。

其实对于createElement_x 这个没有测试成功,具体可以查看:http://camnpr.com/archives/615.html

测试通过的代码形式是:

(function() {
var tags = ['header', 'aside', 'footer', 'nav', 'section', 'article', 'hgroup', 'time'];
for (var i = 0; i < tags.length; i++) {
document.createElement(tags[i]);
}
}());

document.createElement说明
接下来我们来验证一下,,如果我们不加上边的代码的时候,不支持HTML5的浏览器,和支持HTML5的浏览器有什么不同?
从代码的组织形式来看(通过调试工具F12)
IE8 Dom Tree(IE8 Dom Tree)
IE9 Dom Tree(IE9 Dom Tree)
从界面展示形式来看
IE8 HTML View(IE8 HTML View)
IE9 HTML View(IE9 HTML View)
从界面来看,也没太大的区别。不过还是要加上上边的js代码。你觉得呢!

 

另外一个方法(推荐)Google Code Project中,当然也有现成的代码供大家使用大概代码内容也就是上面所说的内容,只不过支持比较全面罢了,所以建议还是是直接加google上的代码吧:

<!–[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

modify by camnpr in 2013-09-09 10:24:18

<!--[if lt IE 9]>
<script src="https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js"></script>
<![endif]-->

还需要说的是如果不能达到预期效果,请你在CSS中加上一句,比如我使用了HTML5中<article>这一新标签,你就在CSS中加上 article {display:block;}这样,你的IE浏览器(包括IE 6),定能兼容HTML5新标签。

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/617.html