在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服务器的方法

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

  1. 老式浏览器(IE6,IE7,IE8)识别html5标签

    近几年HTML5风潮大起,HTML5新增的一些语义化标签,更是让前端兄贵们欢欣鼓舞. HTML5新增的标签<header>,<footer>,<nav>,<h ...

  2. 是否有HTML整洁化的插件,让所有的浏览器都能识别HTML5标签样式的小插件

    如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的 ...

  3. 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签...

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> ...

  4. linux的QQ浏览器里微信,移动端微信内置浏览器(或QQ浏览器)无法识别onclick事件的问题解决...

    1.微信内置浏览器(或QQ浏览器或safari浏览器)无法识别onclick事件的解决 对于这类不兼容的问题真的是很磨人,比较浪费时间,对于技术大牛可能不是问题,但是对于新手来说,可能就是个好几天无法 ...

  5. pandas dataframe缺失值(np.nan)处理:识别缺失情况、删除、0值填补、均值填补、中位数填补、加缺失标签、插值填充详解及实例

    pandas dataframe缺失值(np.nan)处理:识别缺失情况.删除.0值填补.均值填补.中位数填补.加缺失标签.插值填充详解及实例 isnull().natna().isna().fill ...

  6. DOM的appendchild在IE6、7下不兼容

    DOM的appendchild在IE6.7下是不兼容,可以使用insertRow代替appendchild在IE6 7 8和火狐中就可以使用了.

  7. css3盒模型:IE6混杂模式下的盒模型

    IE6混杂模式下的盒模型本来是IE的特有的,后来大家发现,诶还行好用,所以在CSS3中加入了属性box-sizing,当属性值为border-box时,则按照混杂模式的原则创建盒子 适用于场景 1.宽 ...

  8. 识别物体是否存在_【科学实践Vol.1】带你玩转“人脸识别”

    随着时代的发展,人脸识别在我们的生活中变得随处可见:商场里的人脸识别储物柜,校园里的人脸识别刷卡机,手机里的面部解锁--这些应用极大的便利了我们的日常生活.今天,就让我们一起走进人脸识别的原理世界. ...

  9. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute,那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rela ...

最新文章

  1. Android中修改弹出dialog背景无色透明,弹出时有遮罩
  2. 解决MySQL server has gone away
  3. 两台xenserver 同一个vlan中的vm 不能ping通?
  4. Python学习笔记:装饰器
  5. 如何在ubuntu上搭建hustoj?
  6. 我今天对JavaFX的了解
  7. javascript数组扁平化处理
  8. Primes on Interval(CF-237C)
  9. ASP.NET与JS交互
  10. cadence17.4 设计PCB零基础教程入门学习过程
  11. 华为认证培训的话是远程还会面授好?
  12. 用计算机弹清明上河图谱,一篇文章让你看懂《清明上河图》中的所有细节
  13. alpha版、beta版、rc版的意思
  14. No provider available from registry 192.168.126.129:2181 for service com.jt.service.DubboUserServic
  15. 常见却可能无意间伤人的 8 句话
  16. 最硬核的独立蒙特卡洛抽样法
  17. 艺术聚焦:#DRIVE
  18. 第四十一篇 指令中的VNode
  19. 学习PCB之pcb器件的绘制
  20. 纯干货!Java后端开发十二条经验分享!

热门文章

  1. 2021年陕西高考成绩单招查询时间,2021年陕西单招考试时间是什么时候,单招考试分数线是多少...
  2. conceptd什么时候上市_阳山水蜜桃多少钱一斤?什么时候成熟上市?
  3. python没有代码提示怎么设置_Python Kite 使用教程 轻量级代码提示
  4. 作者:冯是聪(1973-),男,博士,北京明略软件系统有限公司联合创始人兼CTO。...
  5. 【2016年第5期】基于深度学习的光学遥感机场与飞行器目标识别技术
  6. 简 易 版 线 程 池 模 型 学 习
  7. 第1章 IO流概述及FileWriter类使用
  8. spring配置dataSource:DriverManagerDataSource
  9. 关于parseInt()里的一些小坑
  10. 给Macbook装系统的网址