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 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
javascript控制台详解
Jun 25 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
javascript实现随机抽奖功能
Dec 30 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编程中的常见漏洞和代码实例
2014/08/06 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
行政总经理岗位职责
2013/12/05 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
运动会通讯稿100字
2015/07/20 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS