Question

我在使用jQuery创建菜单时遇到问题，我已经归结为下面的问题。此示例代码在Firefox和Chrome中的呈现方式不同：

HTML：

<table id="topTable">
    <tr>
        <td>
            <div id="outer">
                OuterDiv
                <div id="inner">
                    InnerDiv
                </div>
            </div>
        </td>
    </tr>
</table>

CSS：

#topTable {
    position: absolute;
    top: 50px;
}

#outer {
    background-color: Red;
}

#inner {
    background-color: Blue;
    position: absolute;
    top: 0px;
    left: 100px;
}

在Firefox中，“outer”元素在页面下方显示50px，但“inner”元素位于页面的最顶部。在Chrome中，“内部”div略高于50px，但远不及页面顶部。有人能解释为什么我会看到这种不同的行为吗？我注意到将“position：absolute”添加到“outer”元素会导致示例在每个浏览器上呈现相同的内容，但这会影响我实际菜单代码的样式。如果我能理解这里发生了什么，我可以弄清楚我需要采取哪些方向来修复我的实际代码。有什么想法吗？

Answer 1

为#outer

添加position:relative;

#outer {
    background-color: Red;
    position:relative;
}

参见：http://jsfiddle.net/5XWcD/1/，我在FF6.02和chrome 11.0

进行了测试

Answer 2

在父节点中设置相对位置

.classParent{
    position: relative;
}

再次调整顶部和左侧

Firefox与Chrome的绝对定位

2 个答案: