没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是:
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)的更多相关文章

  1. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

  2. 支持HTML5新标签

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,               可以利用这一特性让这些浏览器支持HTML5新标签,               ...

  3. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  4. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  5. ie8以下不兼容h5新标签的解决方法

    HTML5新添了一些语义化标签,他们能让代码语义化更直观易懂,有利于SEO优化.但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理. 解决思路就是用js创建h ...

  6. 怎样让老浏览器兼容html5新标签

    CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...

  7. 让低版本浏览器支持html5的标签

    原理就是首先用js的createElement来创建,之后在使用 document.createElement('header'); <header> <hgroup>头部信息 ...

  8. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  9. HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

随机推荐

  1. IIS提示“异常详细信息: System.Runtime.InteropServices.ExternalException: 无法执行程序”

    先来看错误提示: 无法执行程序.所执行的命令为 "C:/Windows/Microsoft.NET/Framework/v3.5/csc.exe" /noconfig /fullp ...

  2. poj 1269 线段相交/平行

    模板题 注意原题中说的线段其实要当成没有端点的直线.被坑了= = #include <cmath> #include <cstdio> #include <iostrea ...

  3. 洛谷P1168 中位数

    题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[2], …, A[2k - 1]的中位数.[color=red]即[/color] ...

  4. karottc A Simple linux-virus Analysis、Linux Kernel <= 2.6.37 - Local Privilege Escalation、CVE-2010-4258、CVE-2010-3849、CVE-2010-3850

    catalog . 程序功能概述 . 感染文件 . 前置知识 . 获取ROOT权限: Linux Kernel <= - Local Privilege Escalation 1. 程序功能概述 ...

  5. Spring BeanUtils的用法

    package test; import java.util.Date; import org.springframework.beans.BeanUtils; import test.basic.B ...

  6. 解决Cookie乱码问题

    写了一个cookie的定义和获取,结果我输入中文后,页面报错 报错信息如下: type Exception report message An exception occurred processin ...

  7. wpf 保存控件中的内容为图片格式

    黄色的是wpf控件的名称! //保存到特定路径            FileStream fs = new FileStream(@"C:\image.png", FileMod ...

  8. SVN服务器配置说明

    1.前 言 花了72小时,终于把 Subversion 初步掌握了.从一个连“什么是版本控制”都不知道的门外汉,到配置出精确至每目录访问的入门者,中间还卡了一天时间.其中费了许多气力,摸索实验了多次, ...

  9. Redis+Spring缓存实例

    转自:小宝鸽 一.Redis了解 1.1.Redis介绍: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).lis ...

  10. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...