如何让IE9以下版本(ie6/7/8)认识html5元素


Posted in HTML / CSS onApril 01, 2013

每个浏览器都有一份清单列举自己所支持的HTML元素。不在清单上的元素都将被视为未知元素。浏览器不会给未知元素设定任何样式(不同浏览器对元素会有不同的默认样式)。在IE9之前的版本中,也不能对未知元素设定样式。未知元素的DOM也显示不正确,IE会在DOM中插入一个没有子元素的空节点。所有你原本认为将会成为这个未知元素的子元素的元素会成为其兄弟节点。

针对这个问题有一个弥补方案,在使用里如article标签之前先用js创建一个虚假的article元素,IE就会识别这个元素了,而支持用css设定样式。这个虚假元素甚至都不需要插入到DOM中。

请看如下的例子

复制代码
代码如下:

< !DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>unknown elements</title>
<style>
article{display:block;border:1px solid red}
</style>
</meta></head>
<body>
<article>
<h1>welcome to feimos's blog</h1>
<p>This is your <span>first time to visit this webSite.</span></p>
</article>
</body>
</html>

IE6不会识别article,所以也不会有红色边框。

如何让IE9以下版本(ie6/7/8)认识html5元素

但是如果我们在head中加入一句js,情况立马就不一样了。

复制代码
代码如下:

<script type="text/javascript">
document.createElement("article");
</script>

IE6假装它认识这个元素,正确显示了效果。

如何让IE9以下版本(ie6/7/8)认识html5元素

我们可以为所有新的HTML5元素都一次性创建一份虚假副本,以后就无需担心那些不能良好支持HTML5的浏览器了。Remy Sharp的HTML5 enabling script就是帮助我们做这些事情的,该脚本的基本想法如下:

复制代码
代码如下:

<!--[if lt IE 9]>
<script type="text/javascript">
var e=("abbr,article,aside,audio,canvas,datalist,details,"+
"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+
"progress,section,time,video").split(',');
for(var i=0;i<e .length;i++){
document.createElement(e[i]);
}
</script>
< ![endif]-->

首先利用条件注释判断是不是IE9之前版本,如果是就执行js。先把所有新标签写入e数组中,然后遍历整个数组,并创建副本。

该脚本已经托管在Google Project Hosting上,你可以直接外链这个脚本:

复制代码
代码如下:

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

另外,这段脚本需要放在页面起始的部分,最好是head中,不要放在底部。这样IE在解析页面标签之前就会先运行这段代码。
HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
详解css3 object-fit属性
Jul 27 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 #HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 #HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 #HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 #HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 #HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 #HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 #HTML / CSS
You might like
网友原创的PHP模板类代码
2008/09/07 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
JavaScript实现移动端轮播效果
2017/06/06 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python属于跨平台语言码
2020/06/09 Python
python opencv实现图像配准与比较
2021/02/09 Python
Java如何格式化日期
2012/08/07 面试题
小学科学教学反思
2014/01/26 职场文书
租房协议书怎么写
2014/04/10 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
四风问题对照检查材料
2014/09/22 职场文书
志愿者事迹材料
2014/12/26 职场文书
员工辞职信怎么写
2015/02/27 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
国庆节主题班会
2015/08/15 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技