css - 为什么将兄弟 div 元素呈现为其中之一的子元素

Question

由于某种原因，div 元素在渲染过程中以意想不到的方式改变了它们的父元素，这在 Firefox 和 Chrome 中可以重现。

例如

<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>