欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

在IE6/7/8下识别Html5标签(让老式浏览器识别Html5)

发布时间:2015-11-30  编辑:杨雨个人博客网站   点击:   

识别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符合这种格式,都会进入标准模式。 本文地址:http://itbyc.com/web/css3/5125.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1