如何让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 相关文章推荐
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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封装curl的调用接口及常用函数详解
2018/05/31 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
js 目录列举函数
2008/11/06 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Python全局变量用法实例分析
2016/07/19 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python序列化与数据持久化实例详解
2019/12/20 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
中专自荐信
2013/10/13 职场文书
统计员岗位职责
2013/11/14 职场文书
班组长工作职责
2013/12/25 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
分居协议书范本
2014/11/03 职场文书
教师考核评语大全
2014/12/31 职场文书
初婚初育证明范本
2015/06/18 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Python进度条的使用
2021/05/17 Python