在IE6/7/8下识别html5标签

时间:2022-09-05 11:59:06

识别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符合这种格式,都会进入标准模式。

在IE6/7/8下识别html5标签的更多相关文章

  1. 完美解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  2. HTML5 Shiv完美解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  3. 兼容IE6&bsol;7&bsol;8浏览器的html5标签的几个方案

    html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...

  4. 完美解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法zt

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  5. IE(IE6&sol;IE7&sol;IE8)支持HTML5标签

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  6. &lbrack;转&rsqb;完美解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  7. 解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  8. IE(IE6&sol;IE7&sol;IE8)支持HTML5标签--20150216

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  9. HTML5 Shiv--解决IE&lpar;IE6&sol;IE7&sol;IE8&rpar;不兼容HTML5标签的方法

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理 ...

随机推荐

  1. ASP&period;NET Web API路由系统:Web Host下的URL路由

    ASP.NET Web API提供了一个独立于执行环境的抽象化的HTTP请求处理管道,而ASP.NET Web API自身的路由系统也不依赖于ASP.NET路由系统,所以它可以采用不同的寄宿方式运行于 ...

  2. 去掉你代码里的 document&period;write&lpar;&quot&semi;&lt&semi;script&period;&period;&period;

    在传统的浏览器中,同步的 script 标签是会阻塞 HTML 解析器的,无论是内联的还是外链的,比如: <script src="a.js"></script& ...

  3. Linux中下载、解压、安装文件

    一.将解压包发送到linux服务器上: 1.在windos上下载好压缩包文件后,通过winscp等SFTP客户端传送给linux 2.在linux中通过wget命令直接下载 #wget [选项] [下 ...

  4. &lbrack;Unity3D&rsqb;Unity3D游戏开发之使用EasyTouch虚拟摇杆控制人物移动

    大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei.今天呢,我们来一起学习在Unity3D中使用EasyTouch虚拟摇杆来控制人物移动.虽然Un ...

  5. 根据条件自定义 cxGrid 的单元格样式

    当指定的单元格需要指定样式(如字体颜色设置为红色,背景色设置为黄色)时,可按如下步骤进行: 1.添加 csStyleRepository 控件,并新建 Style,设置前景(TextColor).背景 ...

  6. WinForm 小程序 NotePad

    运行效果: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  7. 机器学习基石:01 The Learning Problem

    什么时候适合用机器学习算法? 1.存在某种规则/模式,能够使性能提升,比如准确率: 2.这种规则难以程序化定义,人难以给出准确定义: 3.存在能够反映这种规则的资料. 所以,机器学习就是设计算法A,从 ...

  8. 关于Django Web应用架构设计开发的几个问题

    1.关于分层,做过传统JEE应用的同学肯定知道JEE应用会分很多个设计层.根据传统Web应用架构设计一般从上到下分这么几个层(太懒了,不画图了):Web前端层.Web后端交互层.业务层.基础数据设施层 ...

  9. 关于ES6

    一.变量声明const和let 变量提升:在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: fu ...

  10. Oracle使用外部表批量创建用户

    整体思路:通过使用外部表将用户名导入Oracle的表中,然后通过PL/SQL遍历数据表,批量创建用户. 具体步骤如下: 1.在安装数据库的服务器的C盘根目录创建一个User List.txt文件,内容 ...