很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了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. noi 7221 拯救公主 （状态压缩+bfs）

    /* 这题实在调糊了 借鉴的题解的一些判断方法 位运算大法好 - - 因为要集齐所有的宝石所以状态压缩一下 f[i][j][s]将s化为二进制 每一0表示该宝石没有 1表示该宝石有 有:到(i,j)这 ...

  2. java.lang.ClassCastException

    是指类型转换出错 当前者的域小于后者的时候出现 譬如说:前者A是子类的对象,而后者B是父类的对象 若使用A = B;就会抛出java.lang.ClassCastException List<C ...

  3. 32.Spring-对象依赖.md

    [toc] 1.对象依赖的分类 Spring中,给对象属性赋值的方法: 构造函数 Set方法 p命名空间 自动装配 注解 1.1构造函数 构造方法通过配置文件中constructor-arg标签实现, ...

  4. ExtJS智能提示工具spket安装与破解

    用myeclipse写java程序,最怕的是什么呢,写javascript代码,原因很简单,没有智能提示,ExtJS是完全js代码的界面库,写起来就更痛苦了,幸好有人做了spket插件,此文采用傻瓜式 ...

  5. ubantu-命令-进入超级用户

    sudo su; 建立文件夹 mkdir ulike_work;

  6. jquery mobile展开项collapsible

    代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  7. 19 Remove Nth Node From End of List(去掉链表中倒数第n个节点Easy)

    题目意思:去掉链表中倒数第n个节点 思路:1.两次遍历,没什么技术含量,第一次遍历计算长度,第二次遍历找到倒数第k个,代码不写了   2.一次遍历,两个指针,用指针间的距离去计算. ps:特别注意删掉 ...

  8. jquery实现页面置顶功能代码

    <html> <head> <title></title><script type='text/javascript> //回到顶部功能 f ...

  9. java学用代码

    /** *Java获取IP代码 */ import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.ev ...

  10. xml中的特殊符号

    其实就是xml的特殊符号,因为它的配置就是xml,所以可以用下面这种写法转义 <          <     >          >      <>   < ...