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

2022-02-07 18:56:03

这篇文章主要介绍了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

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

<!--[if lt IE9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

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

<!--[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 的做法更轻便一些。

<!--[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

四、使用方法

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>

码农公寓

其它参考文章：

一、插件介绍

二、相关图片

三、本站下载

四、使用方法

Respond.js

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

相关文章