html – 职位：绝对位置：相对于Chrome

发布时间：2020-12-14 19:37:50 所属栏目：资源来源：网络整理

导读：在设计我的网站时,我已经在所有浏览器上造成了不调试的主要错误.在Firefox(3.6.10)和IE8中,表单元素显示不错,但在chrome(10)中,只有位置：绝对元素显示. 我有一个无序列表的表格.列表项目设置为position：relative.它包含一个左浮动标签,右浮动字段和潜在的

在设计我的网站时,我已经在所有浏览器上造成了不调试的主要错误.在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;
}

我可以通过删除位置来“修复”这个,但是这是不可接受的.有什么可以做的,以产生预期的结果吗？

解决方法

将其添加到您的css中：

form ul li{
    overflow:auto;
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!