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 place in tree after rendering as the same in source)。

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

Answer 1

问题是你使用了空的div:就像那样

<div />

您应该尝试更改您的代码以使用具有空内容的有效 div:

<div></div>