让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了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新标签的方法的更多相关文章
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 支持HTML5新标签
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- 如何处理HTML5新标签的兼容性问题
支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...
- HTML5新标签的兼容性处理
普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
- HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
- 如何处理HTML5新标签的浏览器兼容性问题？
① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
随机推荐
- 如何在ASP.NET端获取屏幕宽度
using System.Windows.Forms; 首先引用上面的命名空间. 然后在代码中获取屏幕信息.如下代码: System.Windows.Forms.Screen screen = Sys ...
- chrome浏览的下载扩展程序
C:\Users\XXXX\AppData\Local\Google\Chrome\User Data\Default\Extensions 地址栏输入chrome://extensions/并回车打 ...
- redisbook笔记——redis内存映射数据结构
虽然内部数据结构非常强大,但是创建一系列完整的数据结构本身也是一件相当耗费内存的工作,当一个对象包含的元素数量并不多,或者元素本身的体积并不大时,使用代价高昂的内部数据结构并不是最好的办法. 为了解决 ...
- div 显示滚动条
overflow-x:auto 显示横向滚动条 overflow-y:hidden 隐藏纵向滚动条 引用此class,只显示横向的滚动条 .max{ margin:auto; overflow- ...
- PHP magic_quotes_gpc的详细使用方法
工作中遇到的代码 if (ini_get('magic_quotes_gpc')) { function stripslashesRecursive(array $array){ foreach ($ ...
- 【转】 iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍)
原文:http://blog.csdn.net/hmt20130412/article/details/34523235 本来只是打算介绍一下addChildViewController这个方法的,正 ...
- 关于Core Data的一些整理（四）
关于Core Data的一些整理(四) 调用Core Data文件中的Request模板进行条件匹配 //获取ObjectModel相当于获取Core Date文件 NSManagedObjectMo ...
- 安卓之cannot convert from Fragment1 to Fragment
在写一个音乐播放器的时候,用到了fragment,结果在需要返回Fragment的方法里面,无法将Fragment1(Fragment的子类)强制转换成Fragment, 很是纳闷,我是参照一个开源代 ...
- 『重构--改善既有代码的设计』读书笔记----Replace Method with Method Object
有时候,当你遇到一个大型函数,里面的临时变量和参数多的让你觉得根本无法进行Extract Method.重构中也大力的推荐短小函数的好处,它所带来的解释性,复用性让你收益无穷.但如果你遇到上种情况,你 ...
- JSON基础知识总结
JSON基础 一.JSON简介 JSON,全称“JavaScript Object Notation(JavaScript对象表示法)”,起源于JavaScript的对象和数组.JSON,说白了就是J ...