订阅汇聚素材网Feed

让IE系列支持header、nav、section、article、aside、footer等HTML5标签方法

如何让IE系列支持header、nav、section、article、aside、footer等HTML5标签呢?

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的 document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这 段代码,也不会存在http请求。

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

上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。

以下是html5的js文件中的代码:

(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(','),i=e.length;while(i--){document.createElement(e[i])}})()

除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。

<!--[if IE]>
<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(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

还有布局中有用到

<header>、<nav>、<section>、<article>、<aside>、<footer>

首先css样式给他们渲染个

header, footer, article, section, nav, menu, hgroup {display: block;}

IE6-IE8都无法去解析<section><article>等标签,不过我们可以用一小段JS代码来修正它,用document.createElement(tagName) 来创建未知的元素IE的解析器会识别出这些元素

<script type="text/javascript">
document.createElement("section");
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
</script>
9 人Likes
  

文章转载请注明:让IE系列支持header、nav、section、article、aside、footer等HTML5标签方法-汇聚素材网

本文固定链接:http://www.webhj.com/hj-1409.html  +复制链接

让IE系列支持header、nav、section、article、aside、footer等HTML5标签方法:等您坐沙发呢!

发表评论

*

*

7 + 4

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍