让IE支持HTML5的方法
发布时间:2012-12-11 15:15:24 作者:佚名
我要评论

越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个
越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个:
1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。
2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。
针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:
<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >
html5shiv官方网址:http://code.google.com/p/html5shiv/
下面是一些补充:
当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。
以下是在的IE 8显示的例子,未作处理前:

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点。
<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
添加以上代码后,在IE8中显示的效果如下:

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。
演示如下
提示:您可以先修改部分代码再运行
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:
header, footer, nav, section, article {
display:block;
}
1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。
2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。
针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:
复制代码
代码如下:<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >
html5shiv官方网址:http://code.google.com/p/html5shiv/
下面是一些补充:
当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。
以下是在的IE 8显示的例子,未作处理前:

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点。
复制代码
代码如下:<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
添加以上代码后,在IE8中显示的效果如下:

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。
演示如下
提示:您可以先修改部分代码再运行
复制代码
代码如下:<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:
复制代码
代码如下:header, footer, nav, section, article {
display:block;
}
相关文章
- HTML5中加入了全新的结构型元素,例如页眉header,页脚footer,导航nav,内容article,章节section等除了这种整个页面的结构型元素,html5也加入了块级别的语义元素,感兴趣2013-01-31
- 今天把网页改成了HTML5的,调试了一下,在FF和Opera中都显示正常了,到了IE6上却变得面目全非了。GOOGLE了一下,发现了html5shiv这个项目,可以把HTML5的新元素转换成IE6认2011-11-23
- 学习w3c是看到一个检测您的浏览器是否支持 HTML5 视频的方法,在这里与大家分享下,感兴趣的各位可以参考下哈,希望可以帮助到你2013-03-28
- html5大行其道的时代已经到来,如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!下面我们来看几个解决兼容IE6\7\8不支持html5标签2013-01-07
html5 canvas-1.canvas介绍(hello canvas)
大家都知道,目前并不是所有的浏览器中支持html5,就算是支持html5的浏览器,也不见得支持html5所有的新特性,建议大家使用firefox(开发者的最爱)或者是chrome浏览器,我2013-01-07html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
如今HTML5愈来愈引发大家的关注了,HTML5的开发者将必须考虑向下兼容的问题:如何让所有的浏览器都能识别HTML5标签样式2012-12-07input file上传文件样式支持html5的浏览器解决方案
最近在使用file上传控件,发现了file上传控件的两个兼容性问题:一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不2012-11-14- 让所有IE支持HTML5的解决方案.2009-10-20
- 浏览器不会给未知元素设定任何样式(不同浏览器对元素会有不同的默认样式)在IE9之前的版本中,也不能对未知元素设定样式,针对这个问题有一个弥补方案,感兴趣的朋友可以2013-04-01
最新评论