为什么将sibbling div元素渲染为其中一个元素的子元素

Question

出于某种原因，div元素在渲染期间以意想不到的方式更改其父元素，在Firefox和Chrome中可重现。

E.g。

<div class="main">
    <div class="slot"/>
    <div class="slot"/>
</div>
<div class="footer"></div>

Firefox调试器将在运行时显示为：

<div class="main">
    <div class="slot"><div class="slot"/></div></div>
    <div class="footer"></div>
</div>

当我删除.slot元素（参见附带的代码）时，所有内容都按预期呈现（渲染后#footer在树中的位置与源中相同）。

代码： http://pastebin.com/3j3aQFdh

Answer 1

问题是你使用空div：像那样

<div />

您应该尝试更改代码以使用包含空内容的有效div：

<div></div>