这篇文章主要介绍了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. Sqoop异常:Exception in thread "main" java.lang.NoClassDefFoundError: org/json/JSONObject

    18/12/07 01:09:03 INFO mapreduce.ImportJobBase: Beginning import of staffException in thread "m ...

  2. yo install generator-gulp-react遇到UNMET PEER DEPENDENCY问题

    最近在用yeoman下载下来的框架配置react环境 yo install generator-gulp-react安装框架包 遇到了 UNMET PEER DEPENDENCY问题 找不到依赖的gu ...

  3. [JLOI2015]装备购买 （高斯消元）

    [JLOI2015]装备购买 \(solution:\) 首先这道题的题面已经非常清晰的告诉我们这就是线性空间高斯消元的一道题(可以用某些装备来表示另一件装备,这已经不能再明显了),只是这道题要求我们 ...

  4. C# 进程的挂起与恢复

    1. 源起: 仍然是模块化编程所引发的需求.产品经理难伺候,女产品经理更甚之~:p 纯属戏谑,技术方案与产品经理无关,芋头莫怪! VCU10项目重构,要求各功能模块以独立进程方式实现,比如:音视频转换 ...

  5. JQuery中的$.getScript()、$.getJson()和$.ajax()方法

    $.getScript() 有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的.虽然可以在需要哪个JavaScript文件时,动态地创建<script>标签, ...

  6. SpringBoot常用Starter介绍和整合模板引擎Freemaker、thymeleaf 4节课

    1.SpringBoot Starter讲解 简介:介绍什么是SpringBoot Starter和主要作用 1.官网地址:https://docs.spring.io/spring-boot/doc ...

  7. nginx反向代理实现前后端分离&跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  8. oracle修改日期格式

    查看默认的日期格式 select * from v$nls_parameters; 更改 alter session | system (范围) set xxxx=“yyyy-mm-dd” ;

  9. html5 postMessage解决跨域、跨窗口消息传递（转）

    仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...

  10. Expm 4_1 多段图中的最短路径问题

      [问题描述] 建立一个从源点S到终点T的多段图,设计一个动态规划算法求出从S到T的最短路径值,并输出相应的最短路径. 解 package org.xiu68.exp.exp4; public cl ...