当前位置:首页> 正文
在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"
titleDocument/title
/head
body
navnav/nav
asideaside/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里的标签对于老式浏览器来说都是陌生人,那么我们自己创造出来的标签性质上也是陌生人,于是我有加了一行代码。
复制代码代码如下:
mymy/my
youyou/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"
titleDocument/title
/head
body
navnav/nav
asideaside/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里的标签对于老式浏览器来说都是陌生人,那么我们自己创造出来的标签性质上也是陌生人,于是我有加了一行代码。
复制代码代码如下:
mymy/my
youyou/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符合这种格式,都会进入标准模式。
展开全文阅读
相关内容
-
IE浏览器打不开部分网页解决方法(适用于XP/vist
IE浏览器打不开部分网页解决方法(适用于XP/vista),控制,重启,...
-
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Ch
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器...
-
windows11无法识别ADB怎么办?
windows11无法识别ADB怎么办?,无法识别,应用程序,系统,选择,单...
-
PS保护内容识别比例怎么使用?
PS保护内容识别比例怎么使用?,识别,图层,取消,怎么使用,选择,...
-
如何用PS内容识别工具来修复图片?
如何用PS内容识别工具来修复图片?,修复,识别,工具,选择,方法,...
-
微信长按二维码不能识别怎么办 微信长按二维码
微信长按二维码不能识别怎么办 微信长按二维码无法识别的解...
-
如何在相册小秘书app中添加标签 相册小秘书APP
如何在相册小秘书app中添加标签 相册小秘书APP添加标签的简...
-
如何快速复制360图书馆中的文章?
如何快速复制360图书馆中的文章?,复制,快速,个人图书馆,教程,...
-
网页文本无法复制怎么办?
网页文本无法复制怎么办?,文本,复制,网页,全选,文字,在线,复制...
-
360图书馆中的文章怎么快速复制 快速复制360图
360图书馆中的文章怎么快速复制 快速复制360图书馆中的文章...
-
谷歌浏览器怎么将迅雷设置为默认下载方式 谷歌
谷歌浏览器怎么将迅雷设置为默认下载方式 谷歌浏览器设置迅...
-
怎么解决个人所得税app人脸识别失败的问题 个人
怎么解决个人所得税app人脸识别失败的问题 个人所得税app人...
-
怎么解决搜狗浏览器兼容模式不能用的问题
怎么解决搜狗浏览器兼容模式不能用的问题,兼容模式,搜狗浏览...
-
如何保存IE浏览器浏览记录 IE浏览器浏览记录保
如何保存IE浏览器浏览记录 IE浏览器浏览记录保存方法,浏览,浏...
-
IE浏览器网页无法缩放怎么办 解决IE浏览器网页
IE浏览器网页无法缩放怎么办 解决IE浏览器网页无法缩放的方...