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

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

<header>定义页面或区段的头部；
<nav>定义页面或区段的导航区域；
<section>页面的逻辑区域或内容组合；
<article>定义正文或一篇完整的内容；
<aside>定义补充或相关内容；
<footer>定义页面或区段的尾部；
使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。

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

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

<!--[if lt IE 9]>
<script type="text/javascript">
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(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
</script>
<![endif]-->

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

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的”白板”网页,我们该怎么解决呢?
我们可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

<!--[if lt IE 8]>
<noscript>
<style>{@0.8743019443936646@}</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->

HTML5标签不兼容ie怎么办？的更多相关文章

  1. HTML5标签的兼容处理

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

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

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

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

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

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

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

  5. 【html5】解决HTML5新标签不兼容的问题

    html5标签: 1.语义化好 -> SEO a). 程序交流方便 b). 搜索引擎友好 baidu -> 不认识 google 2.本身不兼容,想兼容低版本,请使用如下方法: 方式一:使 ...

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

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

  7. 兼容IE6\7\8浏览器的html5标签的几个方案

    html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...

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

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

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

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

随机推荐

  1. javascript中提高代码的封装性

    我出的面试题中,有一条是问如何避免页面引用JS,出现函数.变量重复.冲突的. 从大的方面讲,应该引入javascript的模块化开发,符合AMD规范之类: 从小的方面说,大概就是限定变量和函数的作用域 ...

  2. EasyIPCamera通过RTSP协议接入海康、大华等摄像机，摒弃私有SDK接入弊端

    本文转自博客:http://blog.csdn.net/xinlanbobo/article/details/53156742 近期工作中需要开发一套视频监控系统,实现WEB端.手机APP端预览局域网 ...

  3. The Apache Thrift API client/server architecture

    http://thrift.apache.org/ The Apache Thrift software framework, for scalable cross-language services ...

  4. some base knowledge

    har类型的长度被定义为一个8位字节,这很简单. short类型的长度至少为两字节.在有些计算机上,对于有些编译程序,short类型的长度可能为4字节,或者更长. int类型是一个整数的“自然”大小, ...

  5. 设置VIM查找时不区分大小写

    :set ic 永久生效 vi ~/.vimrc set ic

  6. Struts表单重复提交

  7. HTML初级教程

    1:标题h1~h6HTML标签有专门的标签处理你页面上的标题,它们是h1,h2,h3,h4,h5和h6,象封建社会一样,h1就是万能的君主而h6就是最底层的百姓. 注意,h1标签在一个页面只能使用一次 ...

  8. APP测试走过的那些坑

    我现在的工作有一大部分也是app测试,虽然自己是app开发出身,但是在测试上还是跌入了很多大坑,毕竟二者还是有很大不同,所处的角度也是不一样的.而开发转测试中,我认为较难的也是一个角度的转换,以一个开 ...

  9. Java8初体验（2）：Stream语法详解

    原文出处: 一冰_天锦 上篇文章Java8初体验(1):lambda表达式语法比较详细的介绍了lambda表达式的方方面面,细心的读者会发现那篇文章的例子中有很多Stream的例子.这些Stream的 ...

  10. nginx ,node 配置项目

    nginx ,node 配置项目 1.安装好node,npm 2.安装cnpm,-g是全局的 sudo npm install -g cnpm --registry=https://registry. ...