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. struts2中s:select标签的使用

    1.第一个例子: <s:select list="{'aa','bb','cc'}" theme="simple" headerKey="00& ...

  2. 【洛谷十月月测】 P3927 SAC E#1 - 一道中档题 Factorial

    题目传送门:https://www.luogu.org/problemnew/show/P3927 题目大意:给你两个正整数n,k,求n!在k进制下末尾零的数量. 我们通过简单的数学分析,便可以发现, ...

  3. POJ 1147

    #include <iostream> #include <algorithm> #define MAXN 3005 using namespace std; int _m[M ...

  4. javascript数据结构与算法--基本排序算法(冒泡、选择、排序)及效率比较

    javascript数据结构与算法--基本排序算法(冒泡.选择.排序)及效率比较 一.数组测试平台. javascript数据结构与算法--基本排序(封装基本数组的操作),封装常规数组操作的函数,比如 ...

  5. 剑指offer五十四之字符流中第一个不重复的字符

    一.题目 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读出 ...

  6. (转)如何修改windows下mysql的字符集

    原文:http://blog.csdn.net/yjz_sdau/article/details/52135050 (1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值, 如 ...

  7. photoshop切图介绍 && photoshop下载与破解

    第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...

  8. Android4.0 Launcher 源码分析3——WorkSpace结构(滑动)

    3.WorkSpace结构(滑动) 桌面的左右滑动功能主要是在PagedView类中实现的,而WorkSpace是PagedView类的子类,所以会继承PagedView中的方法.当我们的手指点击Wo ...

  9. 《垃圾回收的算法与实现》——保守式GC

    保守式GC 保守式GC指"不能识别指针和非指针的GC". 不明确的根,寄存器.调用栈.全局变量空间等属于GC root,这些GC均不能识别出是指针还是非指针. 指针的识别,在不明确 ...

  10. java 实现 HTTP请求(GET、POST)的方法

    使用Java进行服务调用时,避免不了要使用模拟HTTP请求来实现模拟,我在开发过程中恰巧遇到了这类的业务需求,所以就对这类的方法进行了一次总结,原理层次的东西暂时不考虑,毕竟HTTP的底层实现啥的,东 ...