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

【问题标题】：Absolute child collapses parent to zero height only on Safari绝对子级仅在 Safari 上将父级折叠为零高度
【发布时间】：2014-01-18 08:59:32
【问题描述】：

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

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 进行修改。谢谢。

【问题讨论】：

我无法重现该问题。红色框在 Safari (7.0.1) 中看起来与在最新的 Chrome 中相同。带有红色边框的框有一个高度和宽度。
@myajouri ：啊，我在 Windows 版 Safari 上遇到了错误！但由于它已停产，我想我会忽略它 :) 感谢您在更新的 Safari 上试用它。如果您想将其发布为答案（我的错误似乎只影响 Safari for Windows），我将很乐意接受。否则，我可能会删除该问题，因为它对 Stack Overflow 贡献不大。
是的，我也会忽略 Windows 版 Safari :)

标签： css safari cross-browser css-position

【解决方案1】：

这似乎只发生在 Safari for Windows 中。我已经在 OSX 上的 Safari 7.0.1 中尝试过你的小提琴，红色框看起来就像在最新的 Chrome 中一样（红色框确实有宽度和高度）。

【讨论】：