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

时间 2019-11-09

原文原文链接

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

对于未知元素（主要是如今的HTML5新的语义标签）存在两个基本问题：1.应当如何设定元素的样式？2.元素的DOM是什么样？对于这两个问题，不一样的浏览器会有不一样的答案。咱们来看一下IE。html

一、在IE8及8以前并不容许给未知元素设定样式。html5

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

解决这两个问题的方法：浏览器

以article标签为例，IE不认识这个标签。在使用它以前先用javascript建立一个虚假的<article>元素，IE便会奇迹般地能够识别< article>了，并容许你用CSS给它们设定样式。这个虚假的元素并不须要真正插入到DOM中。只须要在每一个页面上建立一次，就足以教会IE来给这个它不认识的元素设定样式了。这适用于全部版本的IE，甚至包括IE6！代码以下：svn

这里是条件注释。IE会将其解析为一个断定语句：“若是当前浏览器是IE9以前的版本，就执行后面的代码块。”全部其余的浏览器则会将整个代码块视做一段普通的HTML注释。上述脚本代码须要位于页面起始部位——最好是<head>中——而不是页面底部，这样，IE将会在解析页面上的标签和属性以前，先运行脚本代码。还能够外链这个压缩版的脚本：<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>google

如今咱们准备就绪，就可使用这些新的HTML5语义标签了。code