很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签。考虑到目前win7自带的IE浏览器版本是IE8，而IE8不支持HTML语义化新标签,所以有必要对HTML5新标签进行兼容，所谓兼容,主要是让这些html5标签显示为块级元素, 并且使低版本的浏览器认为它们是标签。为此我们需要在页面中添加一个HTML5 shiv插件, 它的作用是调用document.createElement将所有HTML5新标签重新生成,低版本IE浏览器再遇到html5新标签时,将其解析为标签。

考虑到IE9是支持html5的，所以要对IE浏览器的版本进行判断，只有IE9以下的版本才执行此脚本。

<!--[if lt IE 9]>
<script src="dist/html5shiv.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])}})()

注意:要将这段代码放到head而不是body后面,因为浏览器是从上到下对html代码进行执行和解析的,在页面渲染之后再执行HTML5 shiv脚本就没有意义了.

此外,head部分的css里面应加上这段,是html5新标签显示为块级元素：

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{

  display: block;}

完整的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>让旧浏览器支持HTML5新增标签</title>

    <style type="text/css">

    article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{

     display: block;

    }

    </style>

　　　<!--[if lt IE 9]>
　　　　<script src="dist/html5shiv.js"></script>
　　　<![endif]-->

</head>

<body>

<header>顶部内容</header>

<nav>导航内容</nav>

<article>文章内容</article>

<footer>底部内容</footer>

</body>

</html>

让IE6,7,8支持HTML5新标签的方法的更多相关文章

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

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  2. 支持HTML5新标签

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

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

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

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

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

  5. 如何处理HTML5新标签的兼容性问题

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

  6. HTML5新标签的兼容性处理

    普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...

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

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

  8. 如何处理HTML5新标签的浏览器兼容性问题？

    ① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...

  9. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

随机推荐

  1. （转）iFrame高度自适应

    第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  2. MVC使用Exception过滤器自定义处理Action的的异常

    1.继承FilterAttribute ,IExceptionFilter自定义处理 /// <summary> /// 登录错误自定义处理 /// </summary> pu ...

  3. 【转】 iOS如何实现表格的折叠效果？

    原文 :  http://blog.csdn.net/youcanping2008/article/details/9202167 一.实现原理:就是在点击表格组头视图的时候,如果该表格视图的组展开了 ...

  4. 最全ASCLL码

    结果 描述 实体编号   space ! exclamation mark ! " quotation mark " # number sign # $ dollar sign $ ...

  5. C#字符串string的常用使用方法

    1--->字符串的声明: 1.string s=new string(char[] arr)     //根据一个字符数组声明字符串,即将字符字组转化为字符串. 2.string s=new s ...

  6. JavaScript--模拟验证码

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. C++ Primer 5th 第12章 动态内存

    练习12.1:在此代码的结尾,b1 和 b2 各包含多少个元素? StrBlob b1; { StrBlob b2 = {"a", "an", "th ...

  8. 09_linux下安装Nvidia显卡驱动

    下载驱动 去官网找去,哈哈o(^▽^)o 安装kernel source [root@localhost ~]# yum install kernel-devel 如果还不行,试试下面的 [root@ ...

  9. .NET,你真的 知道了吗

    搞清自己是干什么的 有人问你是做什么的,回答是:"我是做,NET开发的",有的人也会问:"那.NER.是什么?"刚开始我认为是一个开打工具,后认为是一个平台,一 ...

  10. 002.AngularJs调用Restful实现CRUD

    本节我们主要给大家介绍AngularJs如何调用Restful,实现数据的CRUD. 主要用到的技术: 后端:ASP.NET WebApi + SQLServer2008 前端:AngularJs,B ...