很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了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. access的时间相关的查询

    string sql = "select * from CONCURRENCY WHERE CONCURRENCY.DATE_FLAG BETWEEN  cdate('2013-11-1', ...

  2. java 类处理工具

    public class ClassUtils { private static final Logger LOGGER = LoggerFactory.getLogger(ClassUtils.cl ...

  3. Activity对话框

    对话框Activity style 在style.xml中加入 <!--对话框风格--> <style name="dialog" parent="@a ...

  4. 关于asp.net程序连接不了ORACLE数据库而PL/SQL可以连接的问题

    今天在发布ASP.NET WEB网站时发现程序连接不了数据 报“ORA-12154: TNS: 无法解析指定的连接标识符”的错误,但PL/SQL连接又没有问题.真莫名其秒.在百度找了好多相关的问题.都 ...

  5. （转）dedecms插件开发简明教程

    这篇文章主要为大家介绍了dedecms插件开发的方法,以实例形式对插件开发的步骤进行了详细的介绍,非常具有实用价值,需要的朋友可以参考下  原文:http://www.jb51.net/cms/230 ...

  6. java中对象的转型

    1.对象的向上转型——将子类的对象赋值给父类的引用 Student s=new Student();  Person p=s; 一个引用能够调哪些成员(变量和函数),取决于这个引用的类型  也就是Pe ...

  7. jrae源码解析（二）

    本文细述上文引出的RAECost和SoftmaxCost两个类. SoftmaxCost 我们已经知道,SoftmaxCost类在给定features和label的情况下(超参数给定),衡量给定权重( ...

  8. TCP连接的状态分析

    1.先来了解一下TCP连接建立与关闭过程中的各种状态: CLOSED:初始状态,表示没有任何连接.LISTEN:Server端的某个Socket正在监听来自远方的TCP端口的连接请求.SYN_SENT ...

  9. C#的SerialPort串口程序设计总结

    简介:微软的VS提供了SerialPort控件,也就是串行端口资源. 当然也可以添加引用 using System.IO.Ports; 通过实例化SerialPort对象就可以使用其属性和方法了. S ...

  10. hadoop+eclipse集群搭建及测试

    前段时间搭了下hadoop,每次都会碰到很多问题,也没整理过,每次搜索都麻烦,现在整理下 一.准备工作 1.准备俩计算机,安装linux系统,分别装好jdk(虚拟机操作一样) nano /etc/ho ...