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

2009年10月13日 | 彬Go

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

您还可以参考以下HTML5相关教程及资源:
《HTML5 Drag&Drop 拖拽、FileReader实例教程》
《HTML5 WebSockets 基础使用教程》
《HTML5和CSS3工具资源汇总》
《关于HTML 5 canvas 的基础教程》
《一起感受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浏览器下运行:

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

以下是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])}})()

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

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

分类: HTML5, Javascript

31 条关于 "让所有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) [...]
亚丁Samir'Blog › HTML5 WebSockets 基础使用教程九月 30th, 2010 at 11:26 12
[...] 《关于HTML 5 canvas 的基础教程》《让所有IE支持HTML5的解决方案》 [...]
HTML5 WebSockets 基础使用教程 | 臻式會社 ZENs CLUB 十月 27th, 2010 at 18:34 13
[...] 《让所有IE支持HTML5的解决方案》 [...]
lei 一月 7th, 2011 at 11:25 14
光支持这几个html5标签有什么用呢？
那些js2.0，web3d等才是关键的
小聪一月 24th, 2011 at 20:01 15
这个html5.js有点鸡肋的感觉啊！但是还是提前体验下吧！鸡肋就鸡肋，过几天在我的模板里加上去……（对了，彬Go，html5能和html4混合使用吗？）
戈尔本二月 2nd, 2011 at 23:07 16
一会去试下效果，学习了.
art204 二月 12th, 2011 at 11:40 17
网页上有错误。IE8
Tulip 三月 25th, 2011 at 11:20 18
不错呀，什么时候能让所有浏览器都支持css3那就刚刚嘀啦
规范自己的JavaScript书写 – Dojo Javascript 编程规范 | w3er 五月 15th, 2011 at 12:26 19
[...] 让所有IE支持HTML5的解决方案 (17) [...]
time 五月 22nd, 2011 at 20:46 20
太棒了，总于可以进入html5时代了！
sky 五月 27th, 2011 at 15:15 21
想问下这样用这个 JS 有什么避端吗？
如果建新的网站，或是软件界面都用 HTML 5 标签可以吗？
nealjin 五月 30th, 2011 at 11:02 22
多谢多谢，看了这个文章帮我解决了一个纠结了3天的问题，谢谢博主
ddd 五月 31st, 2011 at 17:56 23
就只有ie9支持啊
ivy 七月 4th, 2011 at 11:58 24
不知道为什么，我调用JS不行，直接加document.createElement(“nav”); 这样是可以的。
狂人草鞋七月 6th, 2011 at 11:57 25
上回不知是在哪一个地方，看到说加这个js要把所有css定义一个display:block属性。。后来就弄的在IE里，所有标签都会自动换行。。找了半天才找到原来不是这样。。晕死。。
huangsy1412 七月 30th, 2011 at 11:15 26
我有个问题，如果DOCTYPE按html5的写法是不能成功的，这个问题如何解决?
huangsy1412 七月 30th, 2011 at 11:17 27
我有个问题，如果DOCTYPE按html5的写法“”是不能成功的，这个问题如何解决?
Ai.sinceow 八月 11th, 2011 at 19:26 28
我把代码运行了一下报错，请问一下为什么会找不到函数？
Fatal error: Call to undefined function socket_create() in D:\ProgramFiles\Apache\htdocs\socket\server\socket.class.php on line 38
邓伟八月 15th, 2011 at 10:01 29
测试成功，但加上样式后width和heigh无效
HTML5和CSS3工具资源汇总 | ocsen 前端开发工作室十二月 5th, 2011 at 17:27 30
[...] 《用CSS3制作50个超棒动画效果教程》《5个CSS3技术实现设计增强》《让所有IE支持HTML5的解决方案》《一起感受HTML5和CSS3的能量》 [...]
lr7188 十二月 22nd, 2011 at 11:29 31
illegal character
[在此错误处中断] (function(){if(!/*@cc_on!@*/0)return;v…i–-){document.createElement(e[i])}})()