IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容。庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

浏览器支持新标签后,还需要添加标签默认的样式:

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
 
mark{background:#FF0;color:#000}

这样两段简单的JavaScript代码和CSS代码就可以让IE8及以下版本浏览器支持HTML5中的新标签。当然最好的方式是直接使用成熟的框架,目前有多个基于这一思想的框架,使用最多的是html5shim框架,html5shim的使用方法很简单,在页面的head部分添加框架的引用即可:

<!--[if lt IE 9]>
<![endif]-->

让浏览器识别HTML5规范中的新标签的更多相关文章

  1. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  2. HTML5 按字母顺序排列的标签列表 new : HTML5 中的新标签。

    标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acron ...

  3. New : HTML5 中的新标签

    基础 标签 描述 <!DOCTYPE>  定义文档类型. <html> 定义 HTML 文档. <title> 定义文档的标题. <body> 定义文档 ...

  4. html5中的新标签

    header <header> 标签定义文档的页眉(介绍信息). nva 根据W3C的定义规范:nav元素是一个可以用来作为页面导航的链接组: <nav><ul>& ...

  5. 在HTML5规范中div中读取预存的data-[key]值

    HTML 代码: <div id="div_test" data-test="this is test" ></div> jQuery ...

  6. 关于html5的几个新标签在IE9之前不支持的解决办法

    IE8及之前的浏览器不支持用CSS的方法来使用这些尚未支持的结构元素,为了在Internet Explorer浏览器中也能正常使用这些结构元素,需要使用JavaScript脚本,如下:<scri ...

  7. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  8. 如何让低版本的IE浏览器(IE6/IE7/IE8)支持HTML5 header等新标签

    html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...

  9. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

随机推荐

  1. C# MVC 与Java MVC

    C# MVC与Java MVC都是三层结构:Controller.View.Model,基本上没有什么区别. 但是C# MVC有很多的变形模式: 上图所示就是C#里面MVC变向模型,里面包含BLL.C ...

  2. django -admin 源码解析

    admin源码解析 单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单 ...

  3. 钉钉h5项目实战|仿钉钉聊天|h5移动端钉钉案例

    最近一直着手开发h5仿钉钉项目,使用到了h5+css3+zepto+wcPop2等技术进行开发,实现了消息.表情.动图发送,仿QQ多人拼合图像,可以选择本地图片,并可以图片.视频预览,仿微信发红包及打 ...

  4. sql server 只读帐号设置能读取存储过程,view等内容。

    如果设定了某个帐号是只读权限,是无法查看存储过程的,比如你用 sp_helptext '存储过程名' ,这样子会提示权限不足或者存储过程不存在,其实就是没权限, 要再给这个只读帐号用 sa 赋予它查看 ...

  5. Android 开发工具类 29_sendPOSTRequest

    sendPOSTRequest 业务类 package com.wangjialin.internet.userInformation.service; import java.io.OutputSt ...

  6. hbase copyTable

    参考:https://yq.aliyun.com/articles/176546 执行:hbase org.apache.hadoop.hbase.mapreduce.CopyTable --new. ...

  7. redis-redisTemplate模糊匹配删除

    前几天需要一个模糊删除redis中key的功能, 没有多想,  直接 String key = "noteUserListenedPoi:*"; redisTemplate.del ...

  8. springboot-12-自定义拦截器的配置interceptor

    springmvc中拦截器的概念已经被弱化了, springboot中使用的也不甚广泛, 通常在用户登录等方面仍有用处 创建拦截器步骤: , 创建拦截器类继承HandlerInterceptor , ...

  9. sublime text 2+sublimeClang

    sublimeClang 是github上面的开源项目,可用于C/C++的自动补全 github:https://github.com/quarnster/SublimeClang 配置sublime ...

  10. Node.js HTTP Server对象及GET、POST请求

    上一博客学习了请求与响应,2次读2次写,但有一个问题就是客户端写入的时候怎么知道请求到达.所以HTTP Server对象出现了.它提供了实现HTTP服务器的基本框架.它可以监听端口的底层套接字和接收请 ...