让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:
document.createElement(‘新标签’); / /新增创建新标签
方式一:Coding JavaScript
将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)
<!--[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])
}})()
最后在css里面加上这段:
/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状,像div那样。
好了,简单吧,一句话概括就是:引用html5.js 使html5标签成块状.
--------------------------------
参考雷锋网的源代码实例:

<!--[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>
让ie浏览器支持html5新标签的解决方法(使用html5shiv)的更多相关文章
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- 支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, ...
- 让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
- ie8以下不兼容h5新标签的解决方法
HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...
- 怎样让老浏览器兼容html5新标签
CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...
- 让低版本浏览器支持html5的标签
原理就是首先用js的createElement来创建,之后在使用 document.createElement('header'); <header> <hgroup>头部信息 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
随机推荐
- UOJ265 【NOIP2016】愤怒的小鸟
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Jenkins用HTTP Request Plugin插件进行网站的监控(运维监控)
使用的插件: [HTTP Request Plugin] 思路: 说明:只能是网站是否正常打开,而不能是这个网站业务是否正常,如果是后者,则需要写特定的接口进行请求处理. 1.通过插件,发送GET请求 ...
- 利用TabHost制作QQ客户端标签栏效果(低版本QQ)
学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...
- 提高SQL的查询效率
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使 ...
- Socket与SocketServer结合多线程实现多客户端与服务器通信
需求说明:实现多客户端用户登录,实现多客户端登录一般都需要使用线程技术: (1)创建服务器端线程类,run()方法中实现对一个请求的响应处理: (2)修改服务器端代码,实现循环监听状态: (3)服务器 ...
- mysql导出到ms sql
导出为ms access数据库,然后在ms sql server管理器中导入就可以了,用csv.sql文件的方式都没成功
- 使用Keil uVision下载hex文件
在uVision3/uVision4/uVision5中,可以创建一个项目用来下载HEX文件到flash里面. 具体步骤如下: 1. 在菜单中,选择 Project - New Project... ...
- properties 配置文件中值换行的问题
在使用properties配置文件的时候我们经常碰到如下两个问题 1:当a=b中的b值内容特别长的时候为了阅读方便我们手动换行,但如果我们直接回车那么后面的数据就会丢失.那如何解决呢? 例如: a=a ...
- tomcat添加https
1.下载依赖包 wget http://archive.apache.org/dist/apr/apr-1.4.5.tar.gz wget http://archive.apache. ...
- 对Java垃圾回收最大的误解是什么
当 我还是小孩的时候,父母常说如果你不好好学习,就只能去扫大街了.但他们不知道的是,清理垃圾实际上是很棒的一件事.可能这也是即使在Java的世界中, 同样有很多开发者对GC算法产生误解的原因--包括它 ...