让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:
document.createElement(‘新标签’); / /新增创建新标签

 

方式一:Coding JavaScript

将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--[if lt IE 9]>
<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(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     }
})()
</script>
<![endif]-->

 


方式二:使用Google的html5shiv包(推荐)

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

当然,你也可以把代码拿出来自己看着办:

(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])
}})()
1
<br>最后在css里面加上这段:
/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
1
主要是让这些html5标签成块状,像div那样。

好了,简单吧,一句话概括就是:引用html5.js  使html5标签成块状.

--------------------------------

参考雷锋网的源代码实例:

image

1
2
3
4
5
<!--[if lte IE 8]>
<script>
       (function(){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(', ');var i=e.length;while(i--){document.createElement(e[i])}})()
    </script>
<![endif]-->

 

<参考:http://blog.csdn.net/ptyzhu/article/details/19477695 & http://www.th7.cn/web/html-css/201404/29228.shtml>

posted @   爱好和平的阿道夫  阅读(1383)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示