这篇文章主要介绍了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. Android学习笔记——Bluetooth的使用

    蓝牙应该是现在每一部智能手机的标配了.想当年在山寨机横行的年代里,蓝牙都可以做为一个卖点~~~ 废话不多说了,进入正题: 使用蓝牙功能是需要权限的,关于蓝牙的权限也就两个: <uses-perm ...

  2. oc语言中的构造方法

    一 构造方法的调用 完整的创建一个可用的对象:Person *p=[Person new]; New方法的内部会分别调用两个方法来完成2件事情,1)使用alloc方法来分配存储空间(返回分配的对象): ...

  3. SAX解析XML文档——（二）

    SAX从上向下解析,一行一行解析.节省内存,不适合CRUD. XML文档: <?xml version="1.0" encoding="UTF-8"?&g ...

  4. Netty+SpringBoot写一个基于Http协议的文件服务器

    本文参考<Netty权威指南> NettyApplication package com.xh.netty; import org.springframework.boot.SpringA ...

  5. Latex 算法Algorithm

    在计算机科学当中,论文当中经常需要排版算法.相信大家在读论文中也看见了很多排版精美的算法.本文就通过示例来简要介绍一下 algorithms 束的用法.该束主要提供了两个宏包,包含两种进行算法排版的环 ...

  6. （原）tensorflow中使用指定的GPU及GPU显存

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6591923.html 参考网址: http://stackoverflow.com/questions ...

  7. GPIO接口解析【转】

    本文提供了一个linux下访问GPIO的约定的概述. 这些调用使用gpio_* 命名前缀.没有别的调用会使用这个前缀或是相关的__gpio_*前缀. 转自:http://blog.163.com/w5 ...

  8. 006_ssl监测及评分

    https://testssl.sh/ 一. https://www.ssllabs.com/ssltest/analyze.html?d=jyall.com 监测下jyll.com,不忍直视啊! 二 ...

  9. [转] php die()与exit()的区别实例详解

    1 前言 php中die()与exit()的真正区别是什么因,我们百度一下发现die是退出并释放内存,exit是退出但不释放内存了,那么真的是这样吗,需要的朋友可以参考下 2 正文 网上搜索die与e ...

  10. 如何利用github打造个人博客专属域名（文字版本）

    1. 前言 此篇文章仅限于记录,不适合作为教程使用. 2. 步骤 2.1 先决条件 有github账号,有个人域名(可在万网购买),电脑本地安装有git环境 2.2 在github新建仓库.例如我的g ...