php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5),识别html5标签: html5添加了许 - phpStudy...

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

识别html5标签:

html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都不支持,也没多大重视,今天早上在群里面看到这些标签的讨论,心里顿时冒出一个疑惑,我在chrome等现代浏览器下面用这些标签固然可以,那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。

复制代码代码如下:

Document

nav

aside

效果出来了,不用想也知道这几个浏览器是不认这几个标签的,因此只是出现了一行文本: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]);

}

}

或者调用谷歌代码库:

复制代码代码如下:

也有写作

这个html5.js功能应该更强大,不仅仅是让老式浏览器识别html5标签那么简单。

联想:自定义标签

既然这些个html5里的标签对于老式浏览器来说都是“陌生人”,那么我们自己创造出来的标签性质上也是陌生人,于是我有加了一行代码。

复制代码代码如下:

my

you

复制代码代码如下:

my {font-size: 30px;}

you {font-weight: bold;}

奇葩的是chrome,FF,safari竟然能识别,并且也加上了样式。

但是在IE下面同样要用createElement创建之后才能识别。

html5 DOCTYPE:

以前一直傻乎乎的以为html5里面那行简洁的文档头也是只能用在支持html5的浏览器里的,今天查了下资料才发现大错特错,自己对文档头的理解不够啊。这个是向下兼容的。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合这种格式,都会进入标准模式。相关阅读:

PHP实现显示照片exif信息的方法

详解OpenSSL中的加密算法指令

如何动态加载外部Javascript文件

深入学习.net验证码生成及使用方法

ASP.NET邮件发送system.Net.Mail案例

C#使用round函数四舍五入的方法

javascript实现youku的视频代码自适应宽度

css+js实现部分区域高亮可编辑遮罩层

分析MySQL中索引引引发的CPU负载飙升的问题

Android ADB常用命令总结

开启Javascript中apply、call、bind的用法之旅模式

SQL中位数函数实例

typecho插件编写教程(四):插件挂载

使用ssh访问防火墙后的Linux服务器的方法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值