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


Posted in Javascript onNovember 25, 2015

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

HTML5的新标签元素有:

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

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

使用他们能让代码语义化更直观,而且更方便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标签设计的界面。

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
javascript去除空格方法小结
May 21 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 #Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 #Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 #Javascript
jquery+css实现动感的图片切换效果
Nov 25 #Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 #Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 #Javascript
Prototype框架详解
Nov 25 #Javascript
You might like
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
js data日期初始化的5种方法
2013/12/29 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
js实现楼层导航功能
2017/02/23 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
采购员的工作职责
2013/12/26 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
MySQL七种JOIN类型小结
2021/10/24 MySQL
MySQL创建定时任务
2022/01/22 MySQL
python pygame 开发五子棋双人对弈
2022/05/02 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS