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

比较常用的HTML5的新标签元素有：

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

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

方法一：通过Javascript创建元素   document.createElenment("......")

在<head>....</head>中添加如下代码：

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

2 <script type="text/javascript">

3     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(', ');

4      var i= e.length;

5      while (i--){

6          document.createElement(e[i])

7      }

8 </script>

9 <![endif]-->

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

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

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标签不兼容(IE6~8)的更多相关文章

  1. HTML5标签的兼容处理

    /* 当使用HTML5标签时为了兼容问题必须声明告诉浏览器这是标签 html5shiv.js这个插件已经帮你声明了所有HTML5的标签不需要自己声明 */ /* 这是告诉浏览器这是一个标签 */doc ...

  2. HTML5标签不兼容ie怎么办？

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

  3. 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法

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

  4. （转）html5 Placeholder属性兼容IE6、7方法

    使低版本浏览器支持Placeholder有很多方法,都不是很完美,或多或少有点问题,且有些原生支持的浏览器在获得焦点时会清空Placeholder提示.发现zhihu的解决方法不错,特记录下 wind ...

  5. PNG兼容IE6解决方法

    虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p> E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法 ...

  6. png兼容IE6的方法

    1.通过CSS滤镜使背景图的PNG对IE6进行兼容 定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了. <style> body{background: li ...

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

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

  8. html5标签兼容ie6，7，8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

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

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

随机推荐

  1. 【暑假】[实用数据结构]UVAlive 4329 Ping pong

    UVAlive 4329 Ping pong 题目: Ping pong Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: % ...

  2. position属性

    所有主流浏览器支持position属性: 任何版本的ie浏览器都不支持属性值“inherit”. position属性规定元素的定位类型,任何元素都可以定位,不过绝对定位或固定元素会生成一个块级框,不 ...

  3. Redhat Enterprise Linux 6.4图形界面的中文问题

    一.界面中文,但Windows中的中文文件名上传到linux后乱码. .bashrc文件: export LANG=zh_CN.UTF-8 /etc/sysconfig/i18n文件: LANG=&q ...

  4. 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇06：移动版优化指南》--本系列完结

    6.移动版优化指南 概述: 移动设备不同于目前的高端设备(Wii.Xbox 360和PS3),市场上的手机硬件是很有限的,并且所有的移动设备都是不一样的.像Adroid手机,由于品牌和出厂年限的不同, ...

  5. POJ3922 A simple stone game

    网上有很多解题报告,我的理解就是可以用类似数学归纳的方法证明,就是取一个数,让对手进入必败态. 详细见论文.

  6. windows 2003 插金税盘 可以识别, 但是会蓝屏重启

  7. 使用Markdown编辑器写博客

    使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图 ...

  8. homework-05 服务器与客户端

    首先非常抱歉第三次和第四次作业我没交上来,不想找借口强调原因,但是这两次作业我一定会补上,到时候会@助教.谢谢 回到这次作业! 这次作业邹老师没说博客的格式,所以在这里就没有什么回答问题的东西了.这次 ...

  9. soliworks三维机柜布局（三）绘制电气线路图

    三维机柜布局中的自动布线是根据线路图中的电气连接属性布的.

  10. C#基础系列（一）

    1.vs中F5(调试)和Ctrl + F5(直接运行不调试)的区别: Ctrl+F5是直接运行生成的程序,不进行重新编绎,所以运行起来比较快F5是重新编绎后再运行,这样可以在程序代码中设置断点跟踪来调 ...