如何让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实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 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
德生PL330的评价与改造
2021/03/02 无线电
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
新闻内页-JS分页
2006/06/07 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python判断windows隐藏文件的方法
2014/03/21 Python
Cpy和Python的效率对比
2015/03/20 Python
详解python单例模式与metaclass
2016/01/15 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python如何停止递归
2020/09/09 Python
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
人代会标语
2014/06/30 职场文书
企业委托书范本
2014/09/13 职场文书
离职信范文
2015/06/23 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers