HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。

HTML5的新标签元素有：

  • <header>定义页面或区段的头部；
  • <footer>定义页面或区段的尾部；
  • <nav>定义页面或区段的导航区域；
  • <section>页面的逻辑区域或内容组合；
  • <article>定义正文或一篇完整的内容；
  • <aside>定义补充或相关内容；

使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。以下就介绍几种方式。

方式一：Coding JavaScript

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

如果是IE9以下的IE浏览器将创建HTML5标签， 这样非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。

第二种方法：使用Google的html5shiv包（推荐）

1 <!--[if lt IE9]>

2 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

3 <![endif]-->

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

1 /*html5*/

2 article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?

我们可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

1 <!--[if lte IE 8]>

2 <noscript>

3      <style>.html5-wrappers{display:none!important;}</style>

4      <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.

5      </div>

6 </noscript>

7 <![endif]-->

近几年HTML5风潮大起，HTML5新增的一些语义化标签，更是让前端兄贵们欢欣鼓舞。

HTML5新增的标签<header>,<footer>,<nav>,<hgroup>,<article>,<section>,<aside>,<audio>,<vedio>,<canvas>...and so on.就不在此一一列举了。

但是像IE6,IE7,IE8这些又老又旧渲染效果又丑，让前端兄贵们恨得牙根痒痒的臭浏览器，由于一些乱七八糟的理由又不能对它们放弃治疗。当然它们不会认识这些新的语义标签。

送它们一个呵呵。

不就着口水干说，让我们来看看不同新浏览器与老式浏览器下对和html5语义标签的渲染效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TEST</title>
  6. <style type="text/css">
  7. header{
  8. color: red;
  9. }
  10. footer{
  11. color: green;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <header>header</header>
  17. <footer>footer</footer>
  18. </body>
  19. </html>

我最爱的chrome下：

万德福~~~

IE8下的效果：

但是，前端兄贵们还是想出了对付他们的办法。

前端大神们发现在渲染前使用document.createElement创建它们，可以使那些冥顽不灵的浏览器识别它们。

当浏览器版本 < IE 9 时，追加script代码段：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>TEST</title>
  6. <style type="text/css">
  7. header {
  8. color: red;
  9. }
  10. footer {
  11. color: blue;
  12. }
  13. </style>
  14. <!--[if lt ie 9]>
  15. <script type="text/javascript">
  16. var i = 0, html5tags = ["header", "footer", "nav", "aside", "article", "section"];
  17. for (i in html5tags) {
  18. document.createElement(html5tags[i]);
  19. }
  20. </script>
  21. <![endif]-->
  22. </head>
  23. <body>
  24. <header>header</header>
  25. <footer>footer</footer>
  26. </body>
  27. </html>

看看IE8下的效果：


至于在老式浏览器下，这些新语义标签被渲染成行内元素的情况，按需要为它们添加样式{display: block;}即可。

好了现在老式浏览器已经可以识别这些新标签了，剩下的就靠我们随意发挥了。

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法的更多相关文章

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

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

  2. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

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

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

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

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

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

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

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

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

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

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

  8. 关于HTML5标签不兼容(IE6~8)

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

  9. 让IE6/IE7/IE8支持HTML5标签的js代码

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

随机推荐

  1. Cocos2d-x 脚本语言Lua基本数据结构-表(table)

    Cocos2d-x 脚本语言Lua基本数据结构-表(table) table是Lua中唯一的数据结构.其它语言所提供的数据结构,如:arrays.records.lists.queues.sets等. ...

  2. 分析Linux内核的启动过程

    第一章 环境 Ubuntu 14.10 Linux Kernel 3.18.6 第二章 代码及调试过程 环境搭建与内核准备: cd ~/LinuxKernel/ wget https://www.ke ...

  3. leetcode第一刷_Search in Rotated Sorted Array

    旋转数组的查找问题.从头開始扫一遍.O(N)的复杂度,一般也能过,甚至先排序下面,再二分都能过.只是这道题的目的当然不在于此. 想一下旋转之后对我们的查找产生了什么影响.假设没旋转过,我们直接比較ta ...

  4. Zend Studio如何调试？

    1.安装Zend Studio之前,本机已安装Apache2.如果使用Apache2作为服务器 Window-Preferences-Php-Php Servers 配置好 URL和Server Ro ...

  5. js 判断手机横竖屏的实现方法（不依赖任何其他库）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Java 基础 —— enum

    枚举的遍历: enum Suit { CLUB, DIAMOND, HEART, SPADE } Collection<Suit> suitTypes = Arrays.asList(Su ...

  7. 蓝书4.1-4.4 树状数组、RMQ问题、线段树、倍增求LCA

    这章的数据结构题很真实 T1 排队 bzoj 1699 题目大意: 求静态一些区间的最大值-最小值 思路: ST表裸题 #include<iostream> #include<cst ...

  8. oracle 定时器调用存储过程

    转载请说明出处:http://t22011787.iteye.com/blog/1112745 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; se ...

  9. swift中使用GCDMulticastDelegate

    在开源库XMPPFramework中提供了一个GCDMulticastDelegate类,使用它可以为一个对象添加多个被委托的对象,以前用oc编写的工程引入了这个类,使用起来十分方便.最近由于换了工作 ...

  10. 列表渲染v-for

    v-for我们用v-for指令根据一组数据的选项列表进行渲染.v-for指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名. demo: < ...