炫意html5
最早CSS3和HTML5移动技术网站之一

如何让IE支持HTML5新元素

我们使用新的HTML5元素时,在其它浏览器中能表现良好的标签(比如Section,article,header和footer)对IE浏览器是个挑战.问题的原因来在IE浏览器的解析机制,这些不能不识别的标签元素导致文档对象的错误展现。

为了说明这个问题,请看下面的简短代码:

  1. <body>
  2. <section>
  3. <p>This is an example</p>
  4. </section>
  5. </body>

复制代码

奇怪的是,在IE6-IE8都无法去解析 < section >标签,导致 Dom节点看上去是下面的样子:

  1. BODY
  2. SECTION
  3. P
  4. #text: This is an example
  5. /SECTION

复制代码

意IE浏览器创建了两个空元素.一个是 section,另一个是 /SECTION.确实是这样的,它将不认识的结束标签作为一个开始标签。
这里有一个方便的方法解决这个问题,最早是由a comment by Sjoerd Visscher实现的。这个方法的最基础理念就是通过使用 document.createElement(tagName) 来创建未知的元素。IE 的解析器会识别出这些元素,将他们以更合理有效的方式解析展示出来。比如我们可以使用下面的这段代码:

  1. document.createElement(“section”);

复制代码

这样,上面的代码解析后就是下面的样子:

  1. BODY
  2. section
  3. P
  4. #text: This is an example

复制代码

这个技术可以让IE6,IE7和Ie8对未知的元素解析.
为了方便起见,Remy Sharp写了一段可以让增强HTML5新元素展示的代码,你可以很方便的下载和使用它们.published a simple script
这段代码对其它浏览器,比如:Opera 9,Firefox 3 和 Safari 3对这些新元素的解析都默认就是正确的。虽然在Firefox2中也有一些问题,但这些问题还没有找到解决的办法。但是相比IE的更新速度,火狐这个并不算是问题。

注:这种方法创建的标签,我们无法应用于打印样式。

 

(转自:w3cfuns)

炫意HTML5 » 如何让IE支持HTML5新元素

(adsbygoogle = window.adsbygoogle || []).push({});
分享到:更多 ()

CSS3教程HTML5教程