浏览器如何处理未知的HTML元素

    每个浏览器都有一份清单列举了它所支持的HTML元素。对于不在清单上的元素都将被视为“未知元素”。

    对于未知元素(主要是现在的HTML5新的语义标签)存在两个基本问题:1.应当如何设定元素的样式?2.元素的DOM是什么样? 对于这两个问题,不同的浏览器会有不同的答案。我们来看一下IE。

    1、在IE8及8之前并不允许给未知元素设定样式。

    2、如果IE不能明确识别一个元素,它就会在DOM中插入一个没有子元素的空节点。所有那些你认为将会是这个未知元素的子元素的元素实际上会称为其兄弟元素。

解决这两个问题的方法:

     以article标签为例,IE不认识这个标签。在使用它之前先用javascript创建一个虚假的<article>元素,IE便会奇迹般地可以识别< article>了,并允许你用CSS给它们设定样式。这个虚假的元素并不需要真正插入到DOM中。只需要在每个页面上创建一次,就足以教会IE来给这个它不认识的元素设定样式了。这适用于所有版本的IE,甚至包括IE6!代码如下:

这里<!--[if lt IE 9]>和<![endif]-->是条件注释。IE会将其解析为一个判定语句:“如果当前浏览器是IE9之前的版本,就执行后面的代码块。”所有其他的浏览器则会将整个代码块视作一段普通的HTML注释。上述脚本代码需要位于页面起始部位——最好是<head>中——而不是页面底部,这样,IE将会在解析页面上的标签和属性之前,先运行脚本代码。还可以外链这个压缩版的脚本:<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

     现在我们准备就绪,就可以使用这些新的HTML5语义标签了。

posted @ 2014-06-04 15:38  FE_Girl  阅读(656)  评论(0编辑  收藏  举报