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

HTML5的新标签元素有： 


<header>定义页面或区段的头部； 

<footer>定义页面或区段的尾部； 

<nav>定义页面或区段的导航区域； 

<section>页面的逻辑区域或内容组合； 

<article>定义正文或一篇完整的内容； 

<aside>定义补充或相关内容；



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


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

方式一：Coding JavaScript 

1234567891011121314

​​<!--[​​​​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包（推荐）

123

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


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

123

​​<!--[​​​​if​​​​lt IE 9]>​​​​<script src=​​"https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.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 的做法更轻便一些。

1234567

​​<!--[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标签设计的界面。

​

一、插件介绍

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

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

二、相关图片

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

四、使用方法

<!--[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会再改变一次页面的布局等，所以看起来有闪屏的现象）


代码段: 引用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>