让IE支持HTML5的方法


Posted in HTML / CSS onDecember 11, 2012

越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个:

1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。

2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。

针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:

复制代码
代码如下:

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

html5shiv官方网址:http://code.google.com/p/html5shiv/

下面是一些补充:

当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。

以下是在的IE 8显示的例子,未作处理前:
让IE支持HTML5的方法
让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点。

复制代码
代码如下:

<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

添加以上代码后,在IE8中显示的效果如下:
让IE支持HTML5的方法
sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。
演示如下

提示:您可以先修改部分代码再运行
复制代码
代码如下:

<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:
复制代码
代码如下:

header, footer, nav, section, article {
display:block;
}
HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
IE支持HTML5的解决方法
Oct 20 #HTML / CSS
HTML5 Canvas概述
Aug 26 #HTML / CSS
HTML5 canvas 基本语法
Aug 26 #HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 #HTML / CSS
HTML5 解析规则分析
Aug 14 #HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 #HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 #HTML / CSS
You might like
PHP 远程关机实现代码
2009/11/10 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
Javascript模块模式分析
2008/05/16 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
记录一次完整的react hooks实践
2019/03/11 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python使用re模块实现信息筛选的方法
2018/04/29 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
Python gevent协程切换实现详解
2020/09/14 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
关爱残疾人标语
2014/06/25 职场文书
优秀教研组申报材料
2014/12/26 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis