让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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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冒泡排序算法代码详细解读
2011/07/17 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python图片的横坐标汉字实例
2019/12/04 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
腾讯广告词
2014/03/19 职场文书
空气的环保标语
2014/06/12 职场文书
2014年新教师工作总结
2014/11/08 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python