html - 位置 :Absolute withing Position:Relative in 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 来“解决”这个问题，但这是 Not Acceptable 。我可以做些什么来产生预期的结果？

Answer 1

将此添加到您的 CSS:

form ul li{
    overflow:auto;
}

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