出于某种原因,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)。
最佳答案
问题是你使用了空的div:就像那样
<div />
您应该尝试更改您的代码以使用具有空内容的有效 div:
<div></div>
关于css - 为什么同级 div 元素呈现为其中一个元素的子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9466122/