`
hanmiao
  • 浏览: 57619 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

如何让旧版IE浏览器认识HTML5元素

阅读更多
原文出处:http://www.iefans.net/jiuban-ie-renshi-html5-yuansu/,转载请注明原始出处。

每个浏览器都有一份清单列举自己所支持的HTML元素。不在清单上的元素都将被视为未知元素。浏览器不会给未知元素设定任何样式(不同浏览器对元素会有不同的默认样式)。在IE9之前的旧版IE浏览器中,也不能对未知元素设定样式。未知元素的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,所以也不会有红色边框。


但是如果我们在head中加入一句js,情况立马就不一样了。
<script type="text/javascript"> document.createElement("article"); </script>

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


我们可以为所有新的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浏览器在解析页面标签之前就会先运行这段代码。
分享到:
评论

相关推荐

    html5shiv.js

    然而,早期的IE浏览器(主要指IE6、IE7、IE8)并不认识这些元素,无法正确地渲染和应用CSS样式。 HTML5 Shiv的核心功能是通过JavaScript模拟这些新元素的存在,使得在旧版IE中可以正常处理和应用CSS。它的工作原理...

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

    一旦这段脚本运行完毕,后续页面内容就可以使用HTML5的新元素,并且能够被老版本IE浏览器正确解析和显示。 HTML5 Shiv脚本使用条件注释来确保只在IE9以下的浏览器中执行。这个条件注释检查浏览器的版本,如果是IE9...

    在IE6/7/8下识别html5标签(让老式浏览器识别html5)

    这是因为这些旧版IE浏览器并不认识这些新的HTML5元素。 为了解决这个问题,一种常见的解决方案是在页面的部分添加JavaScript代码,使用`document.createElement()`方法来创建这些新标签,使浏览器能够识别它们。...

    javascript使用smipleChart实现简单图表

    为了解决这一问题,库可能会采用一些兼容性补丁,如使用VML(Vector Markup Language)来在旧版IE浏览器中绘制SVG图表。 此外,对于非开发者用户来说,了解如何使用simpleChart还应该包括对图表配置选项的学习,如...

    html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式

    HTML5 Shiv通过动态创建所有HTML5新标签,使得老版本的IE浏览器能够识别并应用这些标签的CSS样式。只需要在页面头部引入HTML5 Shiv的脚本,就可以确保所有浏览器(包括IE6)能够正确解析并显示HTML5元素。 除了...

    Flotr2图形插件

    此外,对于不支持Canvas的旧版IE浏览器,Flotr2会自动使用Excanvas进行模拟。 通过以上介绍,你应该对Flotr2有了基本的认识。它是一个功能强大、易于使用的图形插件,能够帮助你快速地在Web应用中实现各种图表的...

    04. 前端面试题汇总.pdf

    16. 盒模型和布局异常:理解CSS盒模型,包括边距折叠和解决IE浏览器的双边距问题。 17. CSS伪类和伪元素:掌握CSS3新增的伪类和伪元素的使用,以及它们在页面布局和样式中的作用。 18. 响应式设计和媒体查询:了解...

    IeDevToolBar+比较工具

    “IEDevToolBar+比较工具”旨在增强IE浏览器的开发体验。作为一个集成式的开发工具栏,它可能包含了诸多功能,比如HTML元素查看、CSS编辑以及JavaScript调试等。这些功能对于开发者来说,就如同匠人手中的工具一样...

    原生JavaScript实现Tooltip浮动提示框特效

    addEventListener适用于现代浏览器,支持事件捕获和冒泡两种阶段,而attachEvent是旧版IE浏览器的方法,只支持冒泡阶段。 - 事件冒泡:是指在一个DOM树中,一个事件不仅仅只会在绑定的那个元素上触发,还会向上冒泡...

    jquery入门必备的基本认识及实例(整理)

    然而,随着技术的发展,新的浏览器标准已经不再支持老旧的IE浏览器,因此jQuery2.0及更高版本放弃了对IE6/7/8的支持。 ### jQuery特性 1. **HTML元素选取**:能够使用CSS选择器快速定位DOM元素。 2. **HTML元素操作...

    JS操作XML实例总结(加载与解析XML文件、字符串)

    对于不支持DOM操作的旧版IE浏览器,可以使用ActiveXObject创建一个Microsoft.XMLDOM对象,并调用其load方法来加载XML文件。对于支持DOMLevel2的现代浏览器,则可以利用document.implementation.createDocument()方法...

    DIV始终居中的js代码

    ### DIV始终居中的JS代码详解 #### 一、引言 在网页布局中,让一个元素(例如`&lt;div&gt;`)始终保持在视口中心是非常...此外,还特别考虑了对旧版IE浏览器的支持问题。希望本文能够帮助大家更好地理解和应用这一技术。

    javascript检查浏览器是否支持flash的实现代码

    对于非IE浏览器,代码会通过`navigator.plugins`数组来检测。如果数组中存在"ShockwaveFlash"插件,那么同样认为浏览器安装了Flash,并通过分割插件描述字符串中的数字部分来得到Flash版本号。 最终,`flashChecker...

Global site tag (gtag.js) - Google Analytics