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. 总结一下vue调试的方法

    1.最推荐使用的是vue的chrome插件: 2.平时开发中常用到的调试代码:console.log().alert():此外还有console.error()这个我用的比较少,感觉跟console. ...

  2. ubuntu 12.04改变源（转载）

    来源:http://blog.ubuntusoft.com/ubuntu-update-source.html#.Uq_PP9KBmxh 其它版本的修改方式相识.尽量使用原生工具来修改(见下方). 手 ...

  3. 数据挖掘项目之---通过对web日志的挖掘来实现内容推荐系统

    先说一说问题,不知道大家有没有这样的经验,反正我是经常碰到. 举例1,某些网站每隔几天就发邮件给我,每次发的邮件内容都是一些我根本不感兴趣的东西,我不甚其扰,对其深恶痛绝.         举例2,添 ...

  4. c# 编程修改 wince 系统时间

    [StructLayout(LayoutKind.Sequential)] public struct SYSTEMTIME { public ushort wYear; public ushort ...

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

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

  6. govendor

    cd  到工程目录. govendor init : 初始化 govendor fetch : 拉取包 go 1.6以后编译go代码会优先从vendor目录先寻找依赖包: controllers\ar ...

  7. Spring Boot缓存源码分析

    前言 项目里面要增加一个应用缓存,原本想着要怎么怎么来整合ehcache和springboot,做好准备配置这个配置那个,结果只需要做三件事: pom依赖 写好一个ehcache的配置文件 在boot ...

  8. atol实现【转】

    int my_atoi(const char *str) { assert(str != NULL); ; ; while(*str == ' ' || *str == '\n' || *str == ...

  9. 信息发布员和频道管理员如何查看dedecms自定义表单内容

    自定义表单的管理权限,超级管理员有,而频道管理员没有.在频道管理员的权限设置选项里,找不到自定义表单这一项.怎么办呢. 刚开始想修改权限设置选项,但觉得太麻烦.是否有偷懒取巧的办法? 在频道管理员的后 ...

  10. c语言之秒数算法

    // 水仙花树:是指一个3位数字,立方和 等于该数本身 // 秒数算法:随便输入一个大于0的数,求出对应的多少小时多少分钟多少秒 #include <stdio.h> / int main ...