Question

在设计我的网站时，我犯了一个错误，即在所有浏览器上都没有调试。在Firefox（3.6.10）和IE8中，表单元素显示正常，但在chrome（10）中，只显示位置：绝对元素。

我有一张由无序列表制作的表格。列表项设置为position：relative。它包含一个左浮动标签，右浮动字段，可能还有一个位置：绝对小部件。

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;
}

我可以通过删除位置来“修复”这个：相对但这是不可接受的。我能做些什么来产生预期的效果吗？

Answer 1

将此添加到您的css：

form ul li{
    overflow:auto;
}

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

Answer 2

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

<强>更新

我曾想过，如果您的小部件需要显示诸如建议框或日期选择器之类的内容列表，那么最好不要使用overflow值来清除浮动内容。另一种选择是the old clearfix hack，这可能更合适。 Check out this demo，其中包含一个虚拟窗口小部件，显示了不同的解决方案以及高大小部件如何与它们协同工作。

演示：jsfiddle.net/Marcel/ghaHz

Answer 3

添加overflow:visible，它将解决您的问题。

位置：绝对位置：Chrome中的相对位置

3 个答案: