css - 兄弟のdiv要素がそのうちの1つの子としてレンダリングされる理由

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>