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. Node.js创建自签名的HTTPS服务器

    https://cnodejs.org/topic/54745ac22804a0997d38b32d  用Node.js创建自签名的HTTPS服务器  发布于 4 年前  作者 eeandrew  6 ...

  2. 《深入理解Android 卷III》第四章 深入理解WindowManagerService

    <深入理解Android 卷III>即将公布,作者是张大伟.此书填补了深入理解Android Framework卷中的一个主要空白.即Android Framework中和UI相关的部分. ...

  3. Unity3D游戏开发最佳实践20技巧（一）

    关于这些技巧这些技巧不可能适用于每一个项目. 这些是基于我的一些项目经验.项目团队的规模从3人到20人不等. 框架结构的可重用性.清晰程度是有代价的--团队的规模和项目的规模决定你要在这个上面付出多少 ...

  4. [办公应用]如何制作二Y轴图（excel）

    有时候我们会遇到一种图表,就是X轴一致,可是Y轴的数据相差很大.如下图中,年龄和收入就不是一个数量级,在图表中显示的时候,“年龄”的曲线根本看不到(表中数据仅供举例): 解决的方法就是使用双Y轴显示, ...

  5. YTU 2516: 剪刀石头布

    2516: 剪刀石头布 时间限制: 1 Sec  内存限制: 128 MB 提交: 193  解决: 123 题目描述 小慧小时候很喜欢和她的小伙伴们一起玩剪刀(Scissors).石头(Rock). ...

  6. flash builder 4.6 下载完成后安装不成功

    从网上下载了一下flash builder 4.6 下载完成后安装不成功,说是有一个安装被挂起,不成安装成功结果从注册表中删除了pendingobject,还是不行,没有办法,从网上搜了一下,发现了大 ...

  7. 【HDU 3652】 B-numbers

    [题目链接] 点击打开链接 [算法] 数位DP f[i][j][k][l]表示i位数,第一位为j,除以13的余数为k,是/否包括子串“13”的方案数 当然,我们也可以先打表,然后,对于每次询问,二分即 ...

  8. J20170602-ts

    アソシエーション association   n. 联想; 协会,社团; 联合,联系; アンケート    英文是questionnaire

  9. MySQL索引使用以及优化

    优化后台业主评价服务人员运行缓慢.   案发现场:后台业主评价服务人员列表页以及搜索页运行缓慢.运行时间为24074ms.   排查过程: 1.代码开头加时间,结束加时间.看运行了多少秒. 2.给评价 ...

  10. JavaScript--DOM访问子结点childNodes

    访问子结点childNodes 访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性. 语法: elementNode.childNodes 注意: 如果选定的节点 ...