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

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规则.这比overflow:auto在许多情况下清除浮动时更好,滚动条可能出现在元素中(可能是诸如"小部件").

更新:

我曾想过,如果你的小部件需要显示一个事项列表,如建议框或日期选择器,你最好不要使用overflow值来清除浮动.另一种选择是旧的clearfix hack,它可能更合适.看看这个演示,它有一个虚拟小部件,展示了不同的解决方案以及高大小部件如何与它们协同工作.

演示:jsfiddle.net/Marcel/ghaHz