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

时间: 2024-11-03 21:09:54

在IE6/7/8下识别html5标签(让老式浏览器识别html5)的相关文章

为Expression Web 4 添加HTML5 标签支持

大家都知道Expression Web 4 是用来编写网页脚本的一款软件,包含的语言类型涉及:HTML.ASP.PHP.CSS,但它并不支持HTML5.如下图所示,在HTML5 中的<canvas> 标签并不能获得智能感应,这样在开发过程中会变得很麻烦.本篇将介绍如何为其添加HTML5 标签支持.首先需要下载HTML5 模板插件,将得到一个名叫"HTML5Schema.xadd" 的文件. 安装HTML 5 Schema 在"Tools"菜单中选择&qu

一起谈.NET技术,为Expression Web 4 添加HTML5 标签支持

大家都知道Expression Web 4 是用来编写网页脚本的一款软件,包含的语言类型涉及:HTML.ASP.PHP.CSS,但它并不支持HTML5.如下图所示,在HTML5 中的<canvas> 标签并不能获得智能感应,这样在开发过程中会变得很麻烦.本篇将介绍如何为其添加HTML5 标签支持.首先需要下载HTML5 模板插件,将得到一个名叫"HTML5Schema.xadd" 的文件. 安装HTML 5 Schema 在"Tools"菜单中选择&qu

JS 判断是否支持 HTML5 及 是否IE浏览器

要兼容IE8以下的浏览器,太多事情做不了.直接干掉 IE8以下的浏览器. <script type="text/javascript">  if(-[1,]){      if (window.applicationCache) {         alert("高级浏览器");//支持HTML5  就是IE10(含IE10)以上     }else{         alert("IE9"); //IE9     } }else{ 

转一篇非常好的IE兼容文章-兼容IE6\7\8浏览器的html5标签的几个方案

html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!因为前端的春天已经到来,而且不止一个春天.如果你不信,我只能说:爱信不信! 下面我们来看一个标准的html5标签结构:(我这里只是说标签,其它概不涉及) <!DOCTYPE HTML> <html> <head> <meta charset=&q

让IE6/7/8支持HTML5标签的方法

让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的 document.createElement声明,利用条件注释针对IE来调用这个js文件.Opera,FireFox等其他非IE浏览器就会忽视这 段代码,也不会存在http请求. 方式一:引用google的html5.js文件,代码内容可以自己下载下来看.  代码如下 复制代码 <!–[if lt IE9]> <script src="http://html5

ie6下点a标签不会submit把javascript:void(0)改成###

文章简介:IE6下javascript:void(0)不submit的另类方法. 今天解决一BUG,在ie6下点a标签不会submit,原来在a的href上写的是javascript:void(0);把javascript:void(0)改成###,问题解决.但是如果这个html是程序员喷的,那可就要走大流程了.咨询大师,于是留下了这千古绝唱. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

IE6下通过a标签点击切换图片的问题_javascript技巧

不过, 国内大部分用户还是在用IE6. IE6下通过a标签的onclick事件切换某个图片时, 有可能出现图片无法加载问题, httpwatch抓取表现结果是abort. 测试了一下,找到了解决办法. a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样: 1. <a href="javascript://" onclick="dosomething()">a1</a> 2. <a href="javascript

html5-linux系统下的audio标签中文问题

问题描述 linux系统下的audio标签中文问题 我有一个网页用的是html5的audio标签播放音乐,是在我自己的windows服务器下可以正常播放中文音乐,上传到服务器后就不可以了,服务器系统为linux,我试了服务器上的英文名音乐可以播放,但是中文就不可以了,由于是虚拟主机,应该是不可以修改系统设置的,只有修改自己的javascript代码了,纠结了好多天了,网上办法都试了,没找到答案,到底应该怎么做啊!!!! 解决方案 没有人吗? 解决方案二: 不清楚是不是字符集的问题

css中Button在IE6、7下的自适应宽度问题

写一个Button,有两种方式:其一,直接button标签:其二,input type="button". 不管哪种方式,Button的宽度在IE6.7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在. 1.一个普通的Button: 可以很直接的看到Button的两边有空隙,当然,这个空隙是无法用padding:0来解决的. 通常,不少同学会想到给该Button定义一个wid