很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了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. 9.5noip模拟试题

    题目名称 正确答案 序列问题 长途旅行 英文名称 answer sequence travel 输入文件名 answer.in sequence.in travel.in 输出文件名 answer.o ...

  2. 【开源java游戏框架libgdx专题】-03-项目开发与调试

    创建libgdx项目 下载项目配置工具 gdx-setup.jar 生成项目 导入Eclipse File -> Import -> Gradle -> Gradle Project ...

  3. 应用app首次进入导航页动画

    import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActi ...

  4. Android permission访问权限大全

    1.android.permission.WRITE_USER_DICTIONARY 允许应用程序向用户词典中写入新词 2.android.permission.WRITE_SYNC_SETTINGS ...

  5. Ext.ComponentQuery.query()

    转载:http://blog.csdn.net/jiushuai/article/details/7938476 用来找特点的所有容器(Ext.container.Container)或是通过Ext. ...

  6. Swift - 09 - Optionals

    //: Playground - noun: a place where people can play import UIKit // swift中没有被赋值的变量是不能被使用的 //var str ...

  7. C语言之头文件，static与const关键字

    [前言] 最近几个月在做一个C语言代码重构的项目,过程中也让我对之前在书本上学习到的东西有些补充和巩固,在本博中总结记录下,梳理下零碎的知识点和经验也加深印象,书写是为了更好地思考.平时也都是用印象笔 ...

  8. uva 11529 Strange Tax Calculation （几何+计数）

    题目链接: http://vjudge.net/problem/viewProblem.action?id=18277 这题暴力n^4妥妥的TLE!即使n^3也可能会T 正确的姿势应该是:枚举每个点作 ...

  9. vi文本编辑器

    vi文本编辑器分为3个模式: 命令模式 插入模式 ex模式 在命令模式下我们可以使用一下功能 o 插入新的行 u 撤销 n yy  复制n行 p 粘贴 / 查找 i 进入插入模式 exc到命令模式 e ...

  10. ES5严格模式

    http://www.cnblogs.com/snandy/p/3428171.html 介绍了由ECMA262规范定义的Javascript标准,旨在改善错误检查功能并且标识不会延续到未来js版本的 ...