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

这篇文章给大家介绍怎么让IE9以下版本(ie6/7/8)认识html5元素，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

我们提供的服务有：网站设计、做网站、微信公众号开发、网站优化、网站认证、垫江ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的垫江网站制作公司

每个浏览器都有一份清单列举自己所支持的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>
 <h2>welcome to feimos's blog</h2>
 <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在解析页面标签之前就会先运行这段代码。

关于怎么让IE9以下版本(ie6/7/8)认识html5元素就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享名称：怎么让IE9以下版本(ie6/7/8)认识html5元素
转载源于：https://www.cdcxhl.com/article4/pdsiie.html

成都网站建设公司_创新互联，为您提供网页设计公司、品牌网站建设、网站改版、静态网站、面包屑导航、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设

Google知识

分类信息网