HTML5的出现激起了我们前端开发人员心中的浪潮，因为HTML5 向开发人员提供了很多新的标签， 如 section， nav， article， header 和 footer 等。但IE6在中国的市场迟迟未消失又给开发人员泼来了冷冷的冰水，使得很多新技术无法真正的发挥出来，提升用户的体验。 HTML5这些标签语义化程度高， 会被经常使用， 但在 IE6， IE7， IE8 和 Firefox 2 等老式浏览器中不能识别和正常使用。
为什么老式的浏览器不能识别这些标签？
其实错不在浏览器， 因为在那个时代根本不存在这种标签， 所以不能正确识别出来， 而这种不寻常的标签识别令 DOM 结构变得异常。
我们有测试代码如下。 是一个文章标题和蓝色字的文章内容， 其中文章内容用了 article 标签。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试</title>
<style>
article{color:#06F;}
</style>
</head>
<body>
<h1>文章标题</h1>
<article>
这是文章内容，应该是一段蓝色的文字。在老式浏览器中，如果不做 hack 将显示异常。
</article>
</body>
</html>
在 IE8 中， 显示如下。
IE8 不能识别 article 标签， 定义在标签上的 CSS 样式没有起作用。 在 IE8 中，<article> 被解释成命名为 <article /> 和 </article />两个空的标签元素， 与文章内容并列为兄弟节点， 如下图。
如何在老式浏览器中使用 HTML5 标签？
既然因为不能识别标签而不能使用， 解决办法就是让标签被识别出来。 所幸， 简单地通过document.createElement（tagName） 即可以让浏览器识别标签和 CSS 引擎知道该标签的存在。 假设我们上面的例子的 <head> 区域加上如下代码。
<script>
document.createElement('article');
</script>
IE8 中的 DOM 解释就会变成下图所示。
自然， 文字也显示成正常的蓝色。
结语
http://html5shiv.googlecode.com/svn/trunk/html5.js
分享到：
相关推荐
这些标签语义化程度高, 会被经常使用, 但在 IE6, IE7, IE8 和 Firefox 2 等老式浏览器中不能识别和正常使用. 为什么老式的浏览器不能识别这些标签? 其实错不在浏览器, 因为在那个时代根本不存在这种标签, 所以不能...
心里顿时冒出一个疑惑，我在chrome等现代浏览器下面用这些标签固然可以，那么我在IE6/7/8下用这些标签会有什么效果了呢。于是立马动手测试。 复制代码代码如下: <!doctype html> <html lang=”en”> <...
1.让老式浏览器支持HTML5 HTML5能为我们做的事儿很多，最为可口的就是语义化标签的应用，如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x，那这篇文章对你一定有用，因为现在你也可以在IE上用到HTML5。...
移动端 web 开发，最大的特点是不需要考虑 IE6、7、8 这些已经被人唾弃的老式浏览器。然而，当前市面上的 HTML5 学习资料，大都需要已经有 HTML4.0 的学习基础。对于很多零基础，或者基础很弱的学员来说，学习路径上...
本文介绍了HTML5响应式（自适应）网页设计的实现，分享给大家，具体如下： 第一步：在网页代码的头部，加入一行viewport元标签 <meta name=viewport content=...对于那些老式浏览器（主要是IE6、7、8），需要使用c
程序员面试刷题的书哪个好 HTML HTML和XHTML有什么区别 ...比如：若不声明DOCTYPE类型，IE6浏览器会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型 所以，为了页面的正常显示，一定要写文档声明 行内元
在开发时期，我们经过IE6、IE7、火狐、Opera等主流浏览器上进行测试，都能够保证您网站浏览的流畅、完整，BIZOSS-CMS页面设计遵循标准情况下尽量的减少了各个浏览器中存在的差异，系统不会因为不同的浏览器受到限制...
在开发时期，我们经过IE6、IE7、火狐、Opera等主流浏览器上进行测试，都能够保证您网站浏览的流畅、完整，BIZOSS-CMS页面设计遵循标准情况下尽量的减少了各个浏览器中存在的差异，系统不会因为不同的浏览器受到限制...
在开发时期，我们经过IE6、IE7、火狐、Opera等主流浏览器上进行测试，都能够保证您网站浏览的流畅、完整，网软旅游网站页面设计遵循标准情况下尽量的减少了各个浏览器中存在的差异，系统不会因为不同的浏览器受到...