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. 通过java类文件识别JDK编译版本号

    类文件里第5,6.7,8四个字节是jDK版本信息.当中5,6为小版本:7,8为大版本. 大版本号号相应JDK版本号例如以下: JDK版本 7,8字节 JDK8 52(0x34) JDK7 51(0x3 ...

  2. hdu 5256 序列变换

    最长上升子序列 nlogn;也是从别人的博客学来的 #include<iostream> #include<algorithm> #define maxn 100000+5 u ...

  3. easyUI datagrid 时间格式化

    从后台传过来的数据,其中含有日期字段,那么在前端的easyUI这里显示的话,会显得比较怪异,一大串,中间是个T,后面一大堆零,不知道是什么意思. 看来要进行格式化. 问题是,在哪里格式化? 如果在后端 ...

  4. 有banner的uid数, 有logo的uid数 , 交集数

    [len(i) for i in [banners_uid_set,logos_uid_set,banners_uid_set&logos_uid_set]] import glob impo ...

  5. LAMP安装问题【已解决】

    1.编译不通过提示cannot find mysql header files under /usr/local/mysql解决办法:修改./configuer  --with-mysql=/usr/ ...

  6. bzoj2338

    计算几何 我们先把所有的线段求出来,我们发现只有两个线段等长且中点重合时才能构成矩形,那么线段有n*n条,我们按中点,长度排序,然后对于一条线段扫描所有符合条件的线段计算答案,这样看起来是O(n^3) ...

  7. linux下的zookeeper启动

    zookeeper的安装目录:/usr/local/zookeeper-3.4.6/bin/zkServer.sh; 配置文件路径:../conf/zoo.cfg 端口 :2181: ZooKeepe ...

  8. noip2016 小结（ac两题+学习总结）

    NOIP2016考试小结 DAY 1 T1 题目描述 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩具小人们围成了一个圈,它们有的面朝圈内, ...

  9. [LOJ#10132]异象石

    Description Adera 是 Microsoft 应用商店中的一款解谜游戏. 异象石是进入 Adera 中异时空的引导物,在 Adera 的异时空中有一张地图.这张地图上 有 N 个点,有 ...

  10. DFS/BFS(同余模) POJ 1426 Find The Multiple

    题目传送门 /* 题意:找出一个0和1组成的数字能整除n DFS:200的范围内不会爆long long,DFS水过~ */ /************************************ ...