为什么自闭合iframe标记会阻止显示更多DOM元素？

Question

在Firefox和Safari上，以下代码仅显示第一个iframe

<iframe src="http://www.bing.com"/>
<iframe src="http://www.tsr.ch"/>

而添加结束标记解决了问题

<iframe src="http://www.bing.com"></iframe>
<iframe src="http://www.tsr.ch"></iframe>

我不明白为什么它不起作用。在使用DOMParser解析第二个示例时，无论如何都会转换为自动关闭的iframe。

在这里摆弄：http://jsfiddle.net/hLcukz6p/

Answer 1

因为iframe元素不是一个自闭元素。您正在使用的Firefox和Safari版本将最后的/>仅视为>，并假设其后的所有内容都包含在iframe中。

如果我们尝试传递您通过W3C's validator提供的代码，我们会看到以下错误：

  

错误：在非void HTML元素上使用的自动关闭语法（/>）。忽略斜杠并将其视为开始标记。

<iframe src="http://www.bing.com"/>

     

错误：期待文本或结束标记时看到的文件结尾。

</html>

     

错误：未关闭的元素iframe。

<iframe src="http://www.bing.com"/>

如果您使用浏览器的元素检查器检查文档，您将会看到发生了什么。

我正在使用的Chrome将无效的<iframe ... />转换为<iframe ...></iframe>：

Answer 2

没有＆＃34;自我关闭的iframe＆＃34;在HTML中（或者，就此而言，任何其他类型的自我关闭标记，只有一些元素可以或必须省略结束标记，而iframe不是其中之一）。

您有一个iframe 开始标记，其末尾有无效/。

以下所有内容都是iframe的子节点，因此它被视为不支持iframe的浏览器的替代内容。

---

XHTML支持自动关闭标记，并且可以使用一个元素添加任何元素（如果您不兼容HTML）。

HTML 5允许在省略结束标记时在元素的开始标记的末尾添加/，但除了满足XML成瘾和错误的语法高亮显示之外它没有任何效果。