css - 绝对子级仅在 Safari 上将父级折叠为零高度

Question

我读过很多关于绝对定位及其怪癖的问题，但没有一个真正给我答案，所以这里...

Here's a fiddle ，具有以下 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

这似乎只发生在 Windows 版 Safari 中。我在 OSX 上的 Safari 7.0.1 中试过你的 fiddle ，红框看起来和在最新的 Chrome 中一样(红框确实有宽度和高度)。