Position:Absolute withing Position:Relative in Chrome答案

【问题标题】：Position:Absolute withing Position:Relative in ChromePosition:Absolute withing Position:Relative in Chrome
【发布时间】：2011-07-17 08:49:39
【问题描述】：

在设计我的网站时，我犯了一个重大错误，即没有在所有浏览器上进行调试。在 Firefox (3.6.10) 和 IE8 中，表单元素显示正常，但在 chrome(10) 中，仅显示 position:absolute 元素。

我有一个由无序列表组成的表单。列表项设置为 position:relative。它包含一个左浮动标签、右浮动字段，可能还有一个 position:absolute 小部件。

HTML：

<form><ul>
    <li>
        <label>Name</label>
        <input type="text" />
        <a id="nameGenerator" class="widget"></a>
    </li>
</ul></form>

CSS：

form ul li{
    margin: 5px;
    clear: both;
    position:relative;
}
form label{
    float:left;
    margin-top: 0px;
    margin-bottom: 0px;
}
form input{
    float:right;
    margin-top: 0px;
    margin-bottom: 0px;
}
form .widget{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}

我可以通过删除 position:relative 来“解决”这个问题，但这是不可接受的。我可以做些什么来产生预期的结果吗？

【问题讨论】：

期望的结果是什么？也许设置和示例？
@Myles，这是不可接受的，因为它会导致所有绝对位置元素都粘在屏幕顶部，而不是留在各自的列表项中。
@Myles Gray - position:static 是默认定位 - 不是相对的。他需要 li 是相对的，因为每个都必须是它自己的小部件的父级，否则它相对于身体而不是 li 定位。
@Myles Gray：我相信position 的默认值一般是static。
@Myles Gray：默认定位是static

标签： html css google-chrome css-position

【解决方案1】：

将此添加到您的 CSS：

form ul li{
    overflow:auto;
}

http://jsfiddle.net/cTTVs/1/

【讨论】：

以...的名义做什么。现在看起来很好，我就是不明白为什么。
因为浮动和绝对定位的元素使周围的元素没有自然流动的元素。只有常规元素会使周围的元素拉伸以适应内容，这是一个已知的“问题”（或实际上是正常行为），带有浮动。另一种解决方案是在每个列表项中添加一个 div，并在其上添加一个 clear:both
嗯，谢谢你，你摇滚得难以形容。我担心重做我的网络应用程序的所有 20 个页面……它们完全由表单组成。

【解决方案2】：

只需将overflow:hidden 添加到form ul li 规则。这适用于better than overflow:auto when clearing floats，在滚动条可能出现在元素中的许多情况下（可能例如您的“小部件”）。

更新：

我有一个想法，如果您的小部件需要显示诸如建议框或日期选择器之类的内容列表，您最好不要使用overflow 值来清除浮动。另一种选择是the old clearfix hack，它可能更合适。 Check out this demo 有一个人造小部件，显示不同的解决方案以及高大的小部件如何与它们一起使用。

演示：jsfiddle.net/Marcel/ghaHz

【讨论】：

【解决方案3】：

添加overflow:visible，它会解决你的问题。

【讨论】：