Firefox 与 Chrome 的绝对定位

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 略高于 50 像素，但距离页面顶部还很远。有人可以解释为什么我会看到这种不同的行为吗？我注意到，将“position：absolute”添加到“outer”元素会导致示例在每个浏览器上呈现相同的效果，但这会扰乱我实际菜单代码上的样式。如果我能理解这里发生的事情，我就能弄清楚我需要采取什么方向来修复我的真实代码。有什么想法吗？

Answer 1

添加 position:relative; 为 #outer

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

请参阅：http://jsfiddle.net/5XWcD/1/，我在FF6.02和chrome 11.0中测试过

Answer 2

设置相对于父节点的位置

.classParent{
    position: relative;
}

并再次调整顶部和左侧