当前位置:首页> 正文
在IE6/7/8下识别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符合这种格式,都会进入标准模式。
展开全文阅读
相关内容
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浏览器网页无法缩放的方...