在IE6/7/8下识别html5标签(让老式浏览器识别html5)
发布时间：2013-06-28 17:34:20 作者：佚名 
我要评论
我要评论html5添加了许多语义化的标签估计很多老式IE浏览器都不支持，在chrome等现代浏览器下面用这些标签固然可以，那么我在IE6/7/8下用这些标签会有什么效果了呢，下面与大家分享下动手测试的结果
识别html5标签：
html5添加了许多语义化的标签，比如<nav></nav>,<aside></aside>,<article></article>什么的，当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持，也没多大重视，今天早上在群里面看到这些标签的讨论，心里顿时冒出一个疑惑，我在chrome等现代浏览器下面用这些标签固然可以，那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
效果出来了，不用想也知道这几个浏览器是不认这几个标签的，因此只是出现了一行文本：nav aside;
而现代浏览器下这两个是正常的块级标签，因此有换行。
我冒着试试看的心理，给nav和aside标签加上样式试试。
nav {color: red;}
aside {color:blue;}
自然也不行，那么我加上class呢，并添加样式呢。同样宣告失败。
网上搜了一番，原因是那些老式浏览器诞生的时候压根儿还没有这些标签呢，自然就不认了。解决办法也是有的，那就是在head里面添加如下脚本，让浏览器识别到这是一个标签，这样css也就能顺利渲染了。
document.createElement("nav");
document.createElement("aside");
不过这样写了之后字体颜色是变了，仍然是内联元素，所有还得把样式定义为display:block，不过这些css代码很多reset.css里已经有了。
为了支持所有新增html5标签，你可以这么写
function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}
或者调用谷歌代码库：
<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
也有写作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
这个html5.js功能应该更强大，不仅仅是让老式浏览器识别html5标签那么简单。
联想：自定义标签
既然这些个html5里的标签对于老式浏览器来说都是“陌生人”，那么我们自己创造出来的标签性质上也是陌生人，于是我有加了一行代码。
<my>my</my>
<you>you</you>
my {font-size: 30px;}
you {font-weight: bold;}
奇葩的是chrome,FF,safari竟然能识别，并且也加上了样式。
但是在IE下面同样要用createElement创建之后才能识别。
html5 DOCTYPE：
以前一直傻乎乎的以为html5里面那行简洁的<!doctype html>文档头也是只能用在支持html5的浏览器里的，今天查了下资料才发现大错特错，自己对文档头的理解不够啊。这个是向下兼容的。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。
html5添加了许多语义化的标签，比如<nav></nav>,<aside></aside>,<article></article>什么的，当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持，也没多大重视，今天早上在群里面看到这些标签的讨论，心里顿时冒出一个疑惑，我在chrome等现代浏览器下面用这些标签固然可以，那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。
复制代码
代码如下:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
效果出来了，不用想也知道这几个浏览器是不认这几个标签的，因此只是出现了一行文本：nav aside;
而现代浏览器下这两个是正常的块级标签，因此有换行。
我冒着试试看的心理，给nav和aside标签加上样式试试。
复制代码
代码如下:nav {color: red;}
aside {color:blue;}
自然也不行，那么我加上class呢，并添加样式呢。同样宣告失败。
网上搜了一番，原因是那些老式浏览器诞生的时候压根儿还没有这些标签呢，自然就不认了。解决办法也是有的，那就是在head里面添加如下脚本，让浏览器识别到这是一个标签，这样css也就能顺利渲染了。
复制代码
代码如下:document.createElement("nav");
document.createElement("aside");
不过这样写了之后字体颜色是变了，仍然是内联元素，所有还得把样式定义为display:block，不过这些css代码很多reset.css里已经有了。
为了支持所有新增html5标签，你可以这么写
复制代码
代码如下:function html5(){
var i = 0, html5tag = ["aside", "figcaption", "figure", "footer", "header", "hgroup", "nav", "section"];
for(i in html5tag) {
document.createElement(html5tag[i]);
}
}
或者调用谷歌代码库：
复制代码
代码如下:<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
也有写作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
这个html5.js功能应该更强大，不仅仅是让老式浏览器识别html5标签那么简单。
联想：自定义标签
既然这些个html5里的标签对于老式浏览器来说都是“陌生人”，那么我们自己创造出来的标签性质上也是陌生人，于是我有加了一行代码。
复制代码
代码如下:<my>my</my>
<you>you</you>
复制代码
代码如下:my {font-size: 30px;}
you {font-weight: bold;}
奇葩的是chrome,FF,safari竟然能识别，并且也加上了样式。
但是在IE下面同样要用createElement创建之后才能识别。
html5 DOCTYPE：
以前一直傻乎乎的以为html5里面那行简洁的<!doctype html>文档头也是只能用在支持html5的浏览器里的，今天查了下资料才发现大错特错，自己对文档头的理解不够啊。这个是向下兼容的。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。
相关文章
- 这篇文章主要介绍了html5实现完美兼容各大浏览器的播放器,需要的朋友可以参考下2014-12-26
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下2014-11-18
这款HTML5动画非常可爱，动画的主角是一款粘人的小泥块，用鼠标拖动泥块，泥块即可粘住浏览器，让后一点点掉落下来。而完成这样的HTML5动画，我们只需一张图片和一系列CSS32014-10-31- 本文主要为大家介绍了HTML5新增元素如何兼容旧浏览器的解决办法，需要的朋友可以参考下2014-05-09
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
越来越多的站点开始使用HTML5标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。这里提供一种让ie浏览器支持html5的方法,需要的朋友可以参考下2014-04-08- 很多朋友都在想办法想办法兼容早期的IE浏览器，下面有三种方法能快捷轻松的让你的HTML5&CSS3网站在微软的主要浏览器中也能神奇的运行2014-03-31
- 让IE(包括IE6)支持HTML5元素，需要在HTML头部添加一个简单的document.createElement声明，具体祥看本文2014-03-12
- 学习w3c是看到一个检测您的浏览器是否支持 HTML5 视频的方法，在这里与大家分享下，感兴趣的各位可以参考下哈，希望可以帮助到你2013-03-28
html5中canvas学习笔记2-判断浏览器是否支持canvas
判断浏览器是否支持canvas,本人搜集整理了一些使用方法，感兴趣的朋友可以了解下2013-01-06360图片放大镜怎么关? 360浏览器图片放大镜关闭图文方法详解
360图片放大镜怎么关闭?很多朋友想知道360浏览器关掉图片放大镜方法，其实很简单哦~下文将会为大家介绍，如果你不喜欢360放大镜功能的话，就请参考下文来操作吧2014-11-06
最新评论