如何解决HTML5标签不兼容

一、HTML5标签在浏览器展示存在的问题对于现阶段来说，使用HTML5标签可能遇到的最大问题就是如何在不支持新标签的浏览器中做恰当的处理。当我们在页面中使用HTML5元素时，可能会得到三种不同的结果。结果1：标签被当作错误处理并被忽略。那么DOM构建的时候，就会当作这个标签不存在。结果2：标签会被当作错误处理，并在DOM构建的时候依然会按照预期的代码进行创建，并且HTML标签会被构造成行内元素（也就是说虽然不能识别，但是代码里section标签依然会在dom中创建一个对应section节点，但是属于行内元素）。结果3：标签被识别为HTML5标签，然后用DOM节点对其进行替换。DOM在构建的时候和预想的一致，并且合适的样式会应用到标签上（大部分情况下是块级元素）。有一个具体的例子，大家思考一下下面的代码：divclass=outersectionh1title/h1ptext/p/section/div很多浏览器（比如Firefox3.6和Safari4）解析的时候都会将div作为最外层的元素，然后div里面是一个识别不了的元素（section），它会在DOM中创建，并被作为一个行内元素存在。h1和p元素都是作为section元素的子节点。因为section在DOM中真实存在，所以也可以修改其样式。这种情况对应结果2。IE9之前的版本会认为section标签是一个错误，并直接将其忽略，那么h1和p标签会被解析，然后成为div标签的子节点。/section也会被认为是一个错误并直接跳过。在这些浏览器中实际有效的代码是这样的：divclass=outerh1title/h1ptext/p/div那么，旧版本的IE浏览器除了生成的DOM结构和其他浏览器不一样，其对不可识别标签的容错能力还是很棒的。因为section节点没有在DOM树中构建，所以也就不能给其增加样式。这种情况对应结果1。当然，支持HTML5的浏览器比如IE9，Firefox4+，Safari5+会创建正确的DOM结构，然后这些标签会默认附带HTML5规范中定义的默认样式。那么，我们所面临的最大问题就是同样的代码在不同的浏览器中形成了不同的DOM结构，并且含有不同的样式。二、如何解决HTML5标签不兼容或许会有很多人在质疑：为什么老式的浏览器不能识别这些标签？其实错不在浏览器，因为在那个时代根本不存在这种标签，所以不能正确识别出来，而这种不寻常的标签识别令DOM结构变得异常。对此，人们想出了很多在现阶段页面中使用HTML5元素的解决方案。每一个解决方案为了做到兼容都会遇到一些特定的问题。在此也在马海祥博客上跟大家分享一下：1、实现标签被识别马海祥曾做个一个测试（以IE8为例），是一个文章标题和蓝色字的文章内容，其中文章内容用了article标签。代码如下：!DOCTYPEhtmlhtmlxmlns==zh-CNheadmetacharset=UTF-8/title测试/titlestylearticle{color:#06F;}/style/headbodyh1文章标题/h1article这是文章内容，应该是一段蓝色的文字。在老式浏览器中，如果不做hack将显示异常。/article/body/html在IE8浏览器中，显示如下：IE8不能识别article标签，定义在标签上的CSS样式没有起作用。在IE8中，article被解释成命名为article/和/article/两个空的标签元素，与文章内容并列为兄弟节点，如下图所示：既然因为不能识别标签而不能使用，那我们的解决办法就是让标签被识别出来。所幸，简单地通过document.createElement（tagName）即可以让浏览器识别标签和CSS引擎知道该标签的存在。假设我们上面的例子的head区域加上如下代码。scriptdocument.createElement('article');/scriptIE8浏览器中的DOM解释就会变成下图所示：自然，文字也显示成正常的蓝色。如下图所示：2、JavaScript解决方案JavaScript解决方案目的是解决在旧版本的IE中样式应用的问题。老版本的IE不会识别不明元素已经是一个耳熟能详的特性，而如果这些元素已经通过document.createElement()创建，那么浏览器就可以识别这些标签，并可以将其在DOM树中构建，然后允许开发者对其应用样式。这个方法可以确保HTML5标签能在旧版本IE中对应创建DOM节点，然后可以对其应用样式。这个方法将HTML5块级元素设置成display:block，从而可以在各个浏览器中做到兼容。今天测试以下把马海祥博客的网页改成了HTML5的，调试了一下，在FF和Opera中都显示正常了，到了IE6上却变得面目全非了。对此我还特意去找了一些使用JS代码支持HTML5标签元素的方法，在此也跟大家分享一下：（1）、使用html5shiv查看了一下，发现了html5shiv能解决这个问题，可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行：!--ifltIE9]scriptsrc=![endif]--当然你也可以直接把这个文件下载到自己的网站上。但这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用！但马海祥还要提醒你一下：还要在你的CSS文件中加上以下代码，不然有可能会出现些莫名其妙的问题。header,nav,article,section,aside,footer{display:block;}另外excanvas.js是Google为IE6支持canvas元素写的脚本，以后马海祥会跟大家再细说这样的例子，感兴趣的朋友可以去试试。（2）、使用KillIE6除此之外你还可以使用KILLIE6一族，前提是你的浏览器允许执行JS文件。方法很简单，在你的网站的/body之前加上以下代码就可以了：!--iflteIE6]scriptsrc=![endif]--上面写的!--iflteIE6]在正常的HTML中属于注释，不会被执行，但在IE中是一个判断语句，所以这些代码只有在IE中才会被识别并加载。lte：就是Lessthanorequalto的简写，也就是小于或等于的意思。lt：就是Lessthan的简写，也就是小于的意思。gte：就是Greaterthanorequalto的简写，也就是大于或等于的意思。gt：就是Greaterthan的简写，也就是大于的意思。!：就是不等于的意思，跟javascript里的不等于判断符相同说实话，马海祥不喜欢这个利用JavaScript解决的方案，因为它破坏了我最主要的web应用开发原则：我们不应该使用JavaScript来控制布局。不仅仅是因为这个做法给那些禁用脚本的用户带来了糟糕的用户体验，更重要的是，如果我们希望我们的web应用代码是面向未来，并且维护性高的，那么必须将视图相关部分分离出来。这个方案对在跨浏览器中构建相同的DOM结构很有帮助，也可以确保你的JavaScript和CSS在各个地方运行结果相同，但是这个优势并不能改变我对这个方法的不认同。3、Namespacehack永远不要缺乏使用hack解决问题的能力，在IE中还有其他技术来让浏览器识别不明的标签。这个来自ElcoKlingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素。例如：htmlxmlns=:html5=:section!--content--/html5:section/body/html前缀html5是纯粹是用于这个例子而且也不是官方支持的，你甚至可以用foo作为前缀，结果还是一样。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。这个方法的缺陷很明显：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:html5\:section{display:block;}马海祥点评：这并不是我期望Web开发者编写代码的方式。虽然这是一个非常杰出的解决方案，但是这让应用变得不自然。我不希望看到文件中充满了带命名空间的元素。4、Bulletproof技术（防弹衣技术）说实话，我是第一次接触到这个技术，建议在所有新的HTML5块级元素中增加一个内部的div元素，然后包含一个CSSclass，用这个元素来替代HTML元素（类似在里面穿了一件防弹衣），例如：sectiondivclass=section!--content--/div/section在应用样式的时候，Tantek推荐直接给div增加样式，而不是给新元素增加样式推荐使用：.section{color:blue;}而不是：section{color:blue;}这个方案的原理是用简单的方式将原来的样式应用方式转移到一个代表了HTML5标签的元素上。由于我一般情况下不会将样式通过标签名的方式应用到元素上，所以马海祥也并完全支持这个建议。马海祥觉得这个方案的缺陷是不同的浏览器构建了不同的DOM结构，那么你必须在编写JavaScript和CSS的时候格外小心。获取子节点或者父节点的时候，不同的浏览器返回的结果可能会不一样。特别是在下面的代码中：divclass=outersectiondivclass=sectionmain!--content--/div/section/div5、反向的bulletproof技术还有一些方法，比如尝试使用和Tanteck方案相反的技术，也就是把HTML5元素放在div元素内部，例如：divclass=sectionsection!--content--/sectiondiv这个方案唯一的不同是HTML5元素的位置，其他都一样。喜欢这个技术的支持者认为他的一致性很好（适用于所有的元素，包括hgroup）。但是DOM结构的不同让这个方案意义变得不大。他的主要优势是技术上的一致性。6、关于X-UA-Compatible的使用目前绝大多数网站都用以下代码来作为IE8的兼容方法。metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。在X-UA-Compatible中可用的方法有：metahttp-equiv=X-UA-Compatiblecontent=IE=6metahttp-equiv=X-UA-Compatiblecontent=IE=7metahttp-equiv=X-UA-Compatiblecontent=IE=8metahttp-equiv=X-UA-Compatiblecontent=IE=edge其中最后一行是永远以最新的IE版本模式来显示网页的。另外加上metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7metahttp-eq