如何解决HTML5标签不兼容.docxVIP

一、HTML5标签在浏览器展示存在的问题 对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。 结果1：标签被当作错误处理并被忽略。那么DOM构建的时候，就会当作这个标签不存在。 结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section标签依然会在dom中创建一个对应section节点，但是属于行内元素）。 结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。 有一个具体的例子，大家思考一下下面的代码： div class=outer　　section　　h1title/h1　　ptext/p　　/section　　/div 很多浏览器（比如Firefox 3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在，所以也可以修改其样式。这种情况对应结果2。 IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。/section也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的： div class=outer　　h1title/h1　　ptext/p　　/div 那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建，所以也就不能给其增加样式。这种情况对应结果1。 当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。 那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。 二、如何解决HTML5标签不兼容 或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下： 1、实现标签被识别 马海祥曾做个一个测试（以IE8为例），是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签。代码如下： !DOCTYPE html　　html xmlns=/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 /两个空的标签元素，与文章内容并列为兄弟节点，如下图所示： 既然因为不能识别标签而不能使用，那我们的解决办法就是让标签被识别出来。所幸，简单地通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的head区域加上如下代码。 script　　document.createElement(article);　　/script IE8浏览器中的DOM解释就会变成下图所示： 自然，文字也显示成正常的蓝色。如下图所示： 2、JavaScript解决方案 JavaScript解决方案目的是解决在旧版本的IE中样式应用的问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性，而如果这些元素已经通过document.createElement()创建，那么浏览器就可以识别这些标签，并可以将其在DOM树中构建，然后允许开发者对其应用样式。 这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然