识别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(IE6/IE7/IE8)不兼容HTML5标签的方法

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

  2. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

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

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

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

  4. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法zt

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

  5. IE（IE6/IE7/IE8）支持HTML5标签

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

  6. [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

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

  7. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

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

  8. IE（IE6/IE7/IE8）支持HTML5标签--20150216

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

  9. HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

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

随机推荐

  1. （转载）HTML--- input type=hidden

    (转载)http://www.blogjava.net/lansky07/archive/2007/04/05/108740.html HTML--- input type=hidden 关于< ...

  2. jdk环境变量配置方法

    jdk环境变量配置方法: 在安装完jdk后,还需要对jdk的环境变量进行配置才能正常使用,下面教大家如何配置jdk环境变量: 1.右键选择 计算机→属性→高级系统设置→高级→环境变量 2.系统变量→新 ...

  3. Java---计算机贷款支付额计算(用对话框实现)

    本例演示如何编写程序来计算贷款支付问题. 下面是编写程序的步骤: 1.提示用户输入年利率.年数和贷款总额 2.利用年利率算出月利率 3.通过前面的公式计算月支付额. 4.计算总支付额,它是月支付额乘以 ...

  4. TCP 的那些事儿（下）

    这篇文章是下篇,所以如果你对TCP不熟悉的话,还请你先看看上篇<TCP的那些事儿(上)> 上篇中,我们介绍了TCP的协议头.状态机.数据重传中的东西.但是TCP要解决一个很大的事,那就是要 ...

  5. Finding Palindromes - 猥琐的字符串（Manacher+trie）

    题目大意:有 N 个字符串,所有的字符串长度不超过 200W 任意俩俩字符串可以自由组合,问组合的字符串是回文串的个数有多少个?   分析:这是一个相当猥琐的字符串处理,因为没有说单个的字符串最少多长 ...

  6. Clairewd’s message - HDU 4300（next[]运用）

    题目大意:给两个串第一个串是翻译表(密文可以通过翻译表翻译成明文),第二个串是由密文+明文组成,前面是密文(完整的),后面是明文(未必完整),问能不能把第二个串补全,输出最短的一种可能.   分析:题 ...

  7. poj2325

    题目大意描述: 题目:固执的数??持久的数?? 2014/12/06 18:41 数字乘法的持久性由 Neil Sloane定义, (Neil Sloane在一个娱乐杂志上发表关于数字持久性的文章 6 ...

  8. javaweb笔记5之请求编码问题

    post提交: 设置实体内容的编码:request.setCharacterEncoding("utf-8"); 注意:一定要在获取所有参数之前设置,否则设置无效! get方式提交 ...

  9. 关于ETL的几种运行

    一:代码部分 1.新建maven项目 2.添加需要的java代码 3.书写mapper类 4.书写runner类 二:运行方式 1.本地运行 2. 3. 三:本地运行方式 1.解压hadoop到本地 ...

  10. 理解Android的startservice和bindservice(转)

    一.首先,让我们确认下什么是service? service就是android系统中的服务,它有这么几个特点:它无法与用户直接进行交互.它必须由用户或者其他程序显式的启动.它的优先级比较高,它比处于前 ...