让所有IE支持HTML5的解决方案

2009年10月13日 | 暴风彬彬

　　自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。

您还可以参考以下HTML5相关教程及资源:
《一起感受HTML5和CSS3的能量》

使用和下载

　　html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。)
　　作者已经把js文件放在Google code project上并允许大家直接调用，当然，前提是你不在意调用额外的文件。
http://html5shiv.googlecode.com/svn/trunk/html5.js
　　你可以使用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。下面这段代码仅会在IE浏览器下运行:

1
2
3

当然如果你不喜欢调用外网文件，你也可以下载下来上传到自己的服务器单独调用(作者允许)。

以下是js文件中的代码:

1	(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])}})()

英文原文:JavaScript and the DOM Series: Lesson 1
翻译原文:让所有IE支持HTML5的解决方案(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/html5-ie-enabling-script.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

11 条关于 "让所有IE支持HTML5的解决方案" 的评论

美体内衣没有穿的女人十月 13th, 2009 at 17:33 1
代码会出现运行错误提示
暴风彬彬十月 13th, 2009 at 19:33 2
@楼上的
代码已测试，没有问题，请检查自己操作是否有误。
Posts about CSS as of October 13, 2009 | Definition Of Art LLC 十月 14th, 2009 at 10:02 3
[...] with Google Chrome: It reminded me that last week I was experimenting with HTML5 , CSS3 , and 让所有IE支持HTML5的解决方案 – blog.bingo929.com 10/13/2009 [...]
Hobo 十月 14th, 2009 at 12:21 4
是个好东西啊，提前进入Html5的时代了呵呵，CSS3能支持吗？
mx1700 十月 14th, 2009 at 16:12 5
非常好!但是只是支持代码中加的那些标签。
扩展了一下，支持任意标签
var ss= document.styleSheets[0];
var rules = ss.cssRules ? ss.cssRules : ss.rules;
for(var i = 0;i < rules.length;i++) {
var tags = rules[i].selectorText.split(' ');
for(index in tags) {
var tag = tags[index];
if(/\w/.test(tag)) document.createElement(tag);
}
}

例如css里定义
footer1
{
color:#0CC;
}

代码中写
color
就能应用样式。

代码具体没有测试，不知道会有什么问题。
sky 十月 14th, 2009 at 18:03 6
想问下彬go ，html4 的标签都有默认的css样式，html5中的元素如何去重构喃？
Brando 十月 18th, 2009 at 23:33 7
嗯，果然不錯！的確可以~
yym27hxh 一月 22nd, 2010 at 18:21 8
想问下貌似支持不了视频代码啊 video
Javascript DOM 控制系列教程一 « 就要美三月 9th, 2010 at 18:03 9
[...] 让所有IE支持HTML5的解决方案 (8) [...]
让所有IE支持HTML5的解决方案 « 就要美三月 9th, 2010 at 18:04 10
[...] and the DOM Series: Lesson 1 翻译原文:让所有IE支持HTML5的解决方案(彬Go) 转载声明: [...]
Javascript DOM 控制系列教程一 « 就要美三月 9th, 2010 at 18:05 11
[...] 让所有IE支持HTML5的解决方案 (9) [...]