让IE(IE6/IE7/IE8)支持HTML5标签

分享到:

让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标签区间

方式二:自己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}

昵    称:
验证码:

相关文档:

  • HTML5 canvas translate() 方法
    实例 在位置(10,10)处绘制一个矩形,将新的(0,0)位置设置为(70,70)。再次绘制新的矩形(请注意现在矩形从位置(80,80)开始绘制): Yourbrowser...
  • 22个常见HTML5新特性
    1,新DOCTYPE 还在使用那个讨厌的的标准doctype?试试下面这个 <!DOCTYPEHTML> 2.<figure>标签(图元素) <figure> <imgsrc="path/to/imag...
  • html5的标签
    1.article与sectiondiv的区别 当一个标签只是为了样式化或者方便脚本使用时,应该使用div。 section表示一段专题性的内容,一般会带有标题.,...
  • 基于HTML5 Canvas可撕裂布料效果
    分享一款布料效果的HTML5Canvas应用演示,效果逼真。你会看到,借助Canvas的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神...
  • 基于HTML5 Canvas实现的图片马赛克模糊特效
    马赛克模糊经常应用于图片或者视频,今天我们要利用HTML5Canvas技术来实现图片的马赛克模糊效果。在演示中我们可以拖动滑竿来设置马...
  • 经典 HTML5 & Javascript 俄罗斯方块游戏
    Blockrain.js是一个使用HTML5&JavaScript开发的经典俄罗斯方块游戏。只需要复制和粘贴一段代码就可以玩起来了。最重要的是,它是响应式...
  • [html5/css3]html5 表单验证
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5中的表单</title> <scripttype="text/javascript">...
  • HTML head 头标签(转)
    HTMLhead头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签...
  • html5 图片马赛克
    <body><canvasid="c1"></canvas><scripttype="text/javascript">varoC=document.getElementById("c1");varoGC=oC.getContext("2d");var...
  • 作为Web开发人员,我为什么喜欢Google Chrome浏览器
    转自:http://www.cnblogs.com/moonvan/archive/2011/12/09/2282710.html 在GoogleChrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因...
  • HTML5新特性学习-2
    本文在于巩固基础 HTML5绘图基础 <canvas>画布元素的使用 <div> <canvasid="can"width="200px"height="200px"></canvas> </div>...
  • Ajax保留浏览器历史的两种解决方案(Hash&Pjax)
    总是在githubdown点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请...
  • HTML5新功能
    1、x-webkit-speech HTML5的Inputtag新提供x-webkit-speech语法,目前只能在Chrome11以后的浏览器上使用,能让我们将语音输入的功能很简单的带到我...
  • 大熊君学习html5系列之------WebStorage(客户端轻量级存储方案)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • html5页面开发中,模拟滚动条。
    第一次做手机端页面,遇到一个很奇葩的问题,做好的页面由于内容超出产生了滚动条,测试反馈给我说,页面在安卓系统中,有卡顿的...
  • JQuery实现密码有短暂的显示过程和实现 input hint效果
    目录: 一、实现目的 二、问题思考 三、解决办法 1、输入用户名 2、输入密码短暂显示 一、实现目的 这几天做项目的时候,客户...
  • 1个月成为HTML5前端工程师
    你还在用老办法创建网站制作游戏吗?掌握新web时代最前沿的技术,才能快人一步! HTML5起初就是个非凡的想法,2013年以来,众多“前端...
  • 8个经典炫酷的HTML5 Canvas动画欣赏
    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果。本文精选了8个经典炫酷的HTML5Canvas动画欣赏,每一个...
  • 学习HTML5之表单
    HTML5的标准已经定了,应该火了,或者已经火了。那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容...
  • [html5/css3] html5中新增和废除的属性
    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性。 新增的属性 1、表单相关的属性 对input(type=text)、select、textarea...