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. 在ubuntu中启用ftp服务

    Vsftpd vsftpd,ftp服务端,本文转自http://wiki.ubuntu.org.cn/Vsftpd 目录 [隐藏] 1 stand alone和super daemon 2 安装 3 ...

  2. hadoop源码导入eclipse

    1,下载hadoop源码 下载链接 http://svn.apache.org/repos/asf/hadoop/common/tags/release-2.2.0/   为2.2.0的源码, 也可以 ...

  3. HW6.17

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  4. HDU-1402 A * B Problem Plus FFT(快速傅立叶变化)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1402 一般的的大数乘法都是直接模拟乘法演算过程,复杂度O(n^2),对于这题来说会超时.乘法的过程基本 ...

  5. 第十一章、认识与学习 BASH 数据流重导向

    数据流重导向就是将某个命令运行后应该要出现在屏幕上的数据, 给它导向到其他的地方,例如文件或者是装置 (例如打印机之类的)! 什么是数据流重导向 命令运行过程如下: 图 5.1.1.命令运行过程的数据 ...

  6. MAX16054

    MAX16054是带有单个开关去抖以及内部闭锁电路的按键通/断控制器,可接受机械开关产生的嘈杂输入,并经过一个有工厂设置的延迟时间后产生干净的数字锁存输出. 开关通.断期间,MAX16054无接触抖动 ...

  7. [iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)

    A.概述      在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能      1.按钮点击后,显示为“已下载”,并且不 ...

  8. like用法

    SQL:btitle like '%"+keyword+"%' 存储过程:keyword like ''%'+@keyword+'%'' 直接查找:name like '%wang ...

  9. JBOss 端口没占用！

    打开exlipse ,启动服务器 后,报如下错误:

  10. sql存储过程exec执行字符串select 的区别

    USE [GuangHong]GO/****** Object: StoredProcedure [dbo].[st_MES_SelInspctDetail] Script Date: 11/23/2 ...