Почему элементы div одного элемента отображаются как дочерние элементы одного из них

Question

По какой-то причине элементы div меняют своих родителей во время рендеринга неожиданным способом, воспроизводимым в Firefox и Chrome.

* 1003 Е.Г. *

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