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从其子元素中获取其高度。它也有一个宽度（由填充权限属性引起）

在Safari上，div的大小始终为0x0，实际上看起来更合乎逻辑：子元素绝对定位，因此父元素应该崩溃。为什么Safari是唯一能够以这种方式运行的浏览器？

鉴于此HTML ，如何在所有浏览器中实现相同的布局，标签位于输入框内？

我再说一遍：我不能对HTML进行任何修改，只能修改CSS。谢谢。

Answer 1

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

绝对孩子只在Safari上将父级折叠到零高度

1 个答案: