在Chrome中相对定位内的绝对定位

Question

我在设计网站时犯了一个致命错误，没有在所有浏览器上进行调试。在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来“修复”这个问题，但这是不可接受的。有什么办法可以产生所需的结果吗？

- Bob Roberts

---

有哪些期望的结果？可能设置一个例子吗？ - easwee

@Myles，这是不可接受的，因为它会导致所有绝对定位元素都粘在屏幕顶部，而不是留在各自的列表项中。 - Bob Roberts

@Myles Gray - position:static是默认定位方式，而不是相对定位。他需要li元素是相对定位，因为每个li元素都必须成为小部件的父级，否则它会相对于body而不是li元素进行定位。 - easwee

我相信position的默认值通常是static。 - Marcel

@Myles Gray：默认的定位方式是 static。 - Stephan Muller

Answer 1

在你的css中添加以下代码：

form ul li{
    overflow:auto;
}

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

- Stephan Muller

---

这是什么鬼……谢谢，但这怎么可能？现在看起来没问题了，只是我不明白为什么。 - Bob Roberts

由于浮动和绝对定位元素使周围元素缺乏自然流动的元素，只有常规元素才能让周围元素延伸以适应内容。这是浮动的已知“问题”（或实际上是正常行为）。另一个解决方案是在每个列表项内部添加一个带有 clear:both 的 div 元素。 - Stephan Muller

非常感谢，你真的很棒。我一直担心要重新制作我的 Web 应用程序的 20 个页面... 它们全部都是表单。 - Bob Roberts

Answer 2

只需将overflow:hidden添加到form ul li规则中即可。在许多情况下，当元素中出现滚动条（可能是您的“小部件”）时，这比使用overflow:auto效果更好。

更新：

我想过，如果您的小部件需要显示诸如建议框或日期选择器之类的事物列表，最好不要使用overflow值来清除浮动。一种替代方法是旧的clearfix hack，这可能更合适。查看此演示文稿，其中有一个虚假小部件显示了不同的解决方案以及如何处理高小部件。

演示：jsfiddle.net/Marcel/ghaHz

- Marcel

Answer 3

添加 overflow:visible 就可以解决你的问题。

- Shreyas