让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支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
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 UTF8编码内的繁简转换类
2009/07/20 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python django集成cas验证系统
2014/07/14 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python文件去除注释的方法
2015/05/25 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python定时截屏实现
2020/11/02 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
父母对孩子说的话
2014/04/12 职场文书
建设工地安全标语
2014/06/07 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
庆祝儿童节标语
2014/10/09 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Python中的tkinter库简单案例详解
2022/01/22 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis
Python日志模块logging用法
2022/06/05 Python