为什么自闭合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验证器提供的代码,我们将看到以下错误:

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

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

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

</html>

错误:未闭合的元素iframe.

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

如果您使用浏览器的Element Inspector检查文档,您将看到正在发生的事情.

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

Answer 2

在HTML中没有"自动关闭iframe"这样的东西(或者,就此而言,任何其他类型的自动关闭标签,只有一些元素可以或必须省略结束标记,而iframe不是他们).

您有一个iframe 开始标记/,其末尾有无效.

随后的所有内容都是iframe的子节点,因此它被视为不支持iframe的浏览器的替代内容.

XHTML支持自动关闭标记,并且可以使用一个元素添加任何元素(如果您不兼容HTML).

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