让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 | 主要是让这些html 5 标签成块状,像div那样。 |
好了,简单吧,一句话概括就是:引用html5.js 使html5标签成块状.
--------------------------------
参考雷锋网的源代码实例:
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]--> |
没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
分类:
响应式Web设计
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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代理技术深度解析与实战指南