html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览器(IE6/IE7/IE8)对的这些新标签“视而不见”,根本识别不了,不免让前端工作者们望而却步。

下面我们收集整体了一些方法,让你再也没有后顾之忧了。

一、引用JS库

让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。

  方式一:引用google的html5.js文件,代码内容可以自己下载下来看。

  <!–[if lt IE9]> 
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

  将以上代码放到head标签区间,由于现在国内基本上直接访问不了谷歌的服务器,如果直接引入外部JS,会让网页打开非常慢,所以建议大家先下载到服务器上,再进行本地文件的引用。

html5.js下载

  方式二:自己coding JS搞定。

<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>

  不管你用上面哪中方式,请记得在CSS中进行如下定义,目的是让这些标签成为块状元素,just like div。

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

如何让低版本的IE浏览器(IE6/IE7/IE8)支持HTML5 header等新标签的更多相关文章

  1. 让IE6/IE7/IE8支持HTML5标签的js代码

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  2. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

  3. 各版本IE兼容问题,IE6,IE7,IE8,IE9,IE10,IE11

    在网站开发和学习中,由于各种兼容性问题,让开发者挺烦恼的,我的学员也经常因为兼容问题来找我取经. 事实上,IE给出了解决方案,谷歌给出了解决方案,国内著名网站百度也将这个解决方案应用于IE的兼容性问题 ...

  4. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  5. IE6 IE7 IE8 的函数声明和函数表达式的实现与其他浏览器有差异

    标准参考 函数声明和函数表达式 定义一个函数有两种途径:函数声明和函数表达式. 函数声明: function Identifier ( FormalParameterList opt ) { Func ...

  6. IE6 IE7 不支持 JSON

    最近发现ie6.7不支持json,解决方法:引入json2.js     <script type="text/javascript" src="json2.js& ...

  7. IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

    标准参考 根据W3C CSS2.1规范第8.3节中的描述,边距属性设置了一个框的边距区的宽度.'margin' 缩写属性设置所有四边的边距,而其它的边距属性( 'margin-top' ,'margi ...

  8. IE6 IE7 IE8(Q) 不支持 JSON 对象

    标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...

  9. SJ9012: IE6 IE7 不支持 JSON 对象

    标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...

随机推荐

  1. python中文乱码例子

    #coding=utf-8 #---中文乱码--- #直接打印中文 print '千里之外取人首级,瞬息之间爆人菊花.' #中文前面加u,变成Unicode编码 print u'千里之外取人首级' # ...

  2. Linux学习笔记21——线程同步的两种方式

    一  用信号量同步 1 信号量函数的名字都以sem_开头,线程中使用的基本信号量函数有4个 2 创建信号量 #include<semaphore.h> int sem_init(sem_t ...

  3. Ubuntu学习笔记-win7&Ubuntu双系统简单搭建系统指南

    win7&Ubuntu双系统简单搭建系统指南 本文是自己老本子折腾Ubuntu的一些记录,主要是搭建了一个能够足够娱乐(不玩游戏)专注练习自己编程能力的内容.只是简单的写了关于系统的安装和一些 ...

  4. NDK的安装和下载

    从官网下载NDK 下载页面:https://developer.android.com/ndk/downloads/index.html 从镜像站点下载NDK "大师兄"是一个由腾 ...

  5. 在Xcode中使用Clang Format

    Xcode中的Re-Indent,顾名思义,只是一个调整缩进的功能,完全依赖它来进行代码格式化显然不够用.我们使用了一个叫做ClangFormat-Xcode的插件,配合Re-Indent一起来做代码 ...

  6. springMVC能做什么,做j2ee时候要考虑什么

    转载: http://jinnianshilongnian.iteye.com/category/231099 [置顶] 跟我学SpringMVC目录汇总贴.PDF下载.源码下载 博客分类: 跟开涛学 ...

  7. 【设计模式 - 6】之桥接模式(Bridge)

    1      模式简介 举个例子,人.车和公路是三个维度,人开着车在公路上行驶,就是将这三个维度进行了关联.人分男人(Man)和女人(Woman),车分小轿车(Car)和公共汽车(Bus),公路分市区 ...

  8. PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码

    PHP程序中使用PDO对象实现对数据库的增删改查操作(PHP+smarty) dbconn.php <?php //------------------------使用PDO方式连接数据库文件- ...

  9. DIV+CSS区块框浮动设计

    在页面布局的时候,能够用绝对定位来实现,可是因为调整某个区块框时其它区块的位置不会对应的改变,所以这并非布局的首选方式.可是使用浮动的区块框能够向左或向右移动,直到它的外边缘碰到包括它区块的边框或还有 ...

  10. android 25 跨进程启动activity

    跨进程启动activity,启动系统预定义的activity就是跨进程的. client项目启动server项目的activity. clientActivity.java package com.s ...