今天小编跟大家讲解下有关在IE6/7/8下识别html5标签(让老式浏览器识别html5) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关在IE6/7/8下识别html5标签(让老式浏览器识别html5) 的相关资料，希望小伙伴们看了有所帮助。
识别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符合这种格式 都会进入标准模式。来源：爱蒂网
