Абсолютный ребенок сворачивает родителя до нулевой высоты только в Safari

Question

Я прочитал много вопросов об абсолютном позиционировании и его особенностях, но ни один из них не дал мне ответа, так что...

Вот скрипка со следующими HTML и CSS:

HTML

<div class="wrap">
    <div class="inline-div">
        <label>
            Test
        </label>
    </div>
    <div class="next-in-line"><input type="text" /></div>
</div>

CSS

div.wrap {
    width: 320px;
    border: 1px dashed grey;
}

div.inline-div {
    border: 1px solid red;
    display: inline;
    padding-right: 10px;
}

div.next-in-line {
    display: inline;
    clear: both;
}

label {
    position: absolute;
    display: inline;
    margin-top: 32px;
    margin-left: 15px;
    margin-right: 15px;
}

input {
    padding: 15px;
    padding-left: 100px;
    width: 200px;
}

Я выделил проблемные div с красной каймой. В Chrome, FF и IE, даже если дочерний элемент расположен абсолютно, вы можете четко видеть красный прямоугольник. Видимо div берет свою высоту от дочернего элемента. У этого также есть ширина (вызванный свойством padding-right)

В Safari размер div всегда равен 0x0, что на самом деле кажется более логичным: дочерний элемент позиционируется абсолютно, поэтому родительский элемент должен свернуться. Почему Safari единственный браузер, который ведет себя так?

Учитывая этот HTML-код, как я могу добиться одинакового макета во всех браузерах с помощью метки, расположенной внутри поля ввода?

Я повторяю: я не могу вносить какие-либо изменения в HTML, только в CSS. Спасибо.

Answer 1

Похоже, это происходит только в Safari для Windows. Я попробовал вашу скрипку в Safari 7.0.1 на OSX, и красное поле выглядит так же, как в последнем Chrome (красное поле имеет ширину и высоту).