如何让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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 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/10/08 PHP
PHP教程 变量定义
2009/10/23 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
大学应届毕业生个人求职信
2013/09/23 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
授权委托书样本
2014/09/25 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
大学生就业意向书
2015/05/11 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
MySQL快速插入一亿测试数据
2021/06/23 MySQL
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js