这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下
HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。 

HTML5的新标签元素有：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--[if lt IE9]>
<script>
  (function() {
   if (!
   /*@cc_on!@*/
   0) return;
   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]-->

如果是IE9以下的IE浏览器将创建HTML5标签， 这样非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。

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

1
2
3
<!--[if lt IE9]>
<![endif]-->

由于国内google的服务器访问卡，建议调用国内的cdn

1
2
3
<!--[if lt IE 9]>
<![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 的做法更轻便一些。

1
2
3
4
5
6
7
<!--[if lte IE 8]>
<noscript>
   <style>.html5-wrappers{display:none!important;}</style>
   <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
   </div>
</noscript>
<![endif]-->

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

其它参考文章：

https://blog.csdn.net/grief_of_the_nazgul/article/details/42454057

一、插件介绍

用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，那么这款html5shiv.js是一个非常好的选择！

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

二、相关图片

三、本站下载

js下载 http://www.ijquery.cn/js/html5shiv.js

官方网站 https://code.google.com/p/html5shiv/
官方下载 https://github.com/aFarkas/html5shiv/releases

四、使用方法

<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

Respond.js

让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）

官方demo地址：http://scottjehl.github.com/Respond/test/test.html

详细分解实现思路 : http://caibaojian.com/respondjs.html

代码段: 引用bootstrap

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>
 

HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 如何让低版本的IE浏览器（IE6/IE7/IE8）支持HTML5 header等新标签

    html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...

  7. IE（IE6/IE7/IE8）支持HTML5标签

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  8. IE（IE6/IE7/IE8）支持HTML5标签--20150216

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  9. IE6 IE7 IE8 FF兼容符号

    2.区别IE8.IE9 一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack. 因为IE8及以下版本是不支持CSS3的,但是我们 ...

随机推荐

  1. group by与avg(),max(),min(),sum()函数的关系

    数据库表: create table pay_report(     rdate varchar(8),     --日期     region_id varchar(4),    --地市      ...

  2. Maven入门-运行struts项目进行测试(三)

    maven运行struts项目进行测试: 在入门二中已经导入struts的jar包. 此时的pom.xml文件 <project xmlns="http://maven.apache. ...

  3. JAVA中的引用

    关于值类型和引用类型的话题,C++.JAVA.python.go.C#等等高级语言都有相关的概念,只要理解了其底层工作原理,可以说即使是不同的语言,在面试学习工作实践中都可以信手拈来(不要太纠集语言) ...

  4. jQuery的end() 方法

    定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 语法 .end() 详细说明 大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例,并生成一 ...

  5. 【转】assert预处理宏与预处理变量

    assert assert是一个预处理宏,由预处理器管理而非编译器管理,所以使用时都不用命名空间声明,如果你写成std::assert反而是错的.使用assert需要包含cassert或assert. ...

  6. 边框回归(Bounding Box Regression)详解

    原文地址:http://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Pa ...

  7. python下的socket常用方法举例

    python下的socket 1.简单的server和client端的socket代码 server.py: #!/usr/bin/env python #_*_ coding:utf-8 _*_ i ...

  8. 解决服务器代码执行mvn test后在classes和test-classes下找不到Spring的bean.xml配置文件问题

    昨天在jenkins构建代码后,执行mvn test 就报错如下: 提示的bean.xm不存在呀, 再来看源码ApplicationContext 的声明 ApplicationContext ctx ...

  9. linux eclipse 报错过时的方法

    重新配置jre库 https://jingyan.baidu.com/article/7f766daff5b8cd4101e1d0b4.html

  10. codeforce 139E

    成段更新+离散化才能过,数据好强.. 单点更新挂在了test27,下次做到成段更新再来做! /* 期望=存活概率*点权值/100 ans=sum(期望) 离散化树木权值,数轴统计累加可能倒下的树木概率 ...