Html Firefox与Chrome的绝对定位

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

HTML:

---

在Firefox中，“外部”元素以50px的速度出现在页面下方，但“内部”元素位于页面的最顶部。在Chrome中，“内部”div略高于50px，但不在页面顶部附近。有人能解释为什么我会看到这种不同的行为吗？我注意到，将“position:absolute”添加到“outer”元素会导致示例在每个浏览器上呈现相同的效果，但这会打乱我实际菜单代码的样式。如果我能理解这里发生了什么，我就可以知道我需要采取什么方向来修复真正的代码。有什么想法吗？

添加

位置：相对用于#外部

请参阅：，我在FF6.02和chrome 11.0中进行了测试，设置了父节点中的相对位置

.classParent{
    position: relative;
}

再次调整顶部和左侧
我想它应该来自他们的盒子模型。我不知道更多，但如果你想让它们表现相同，也许使用reset.css就可以了。我实际上也这么想，并试图将YUI 2 reset添加到一个fiddler中，虽然它确实重置了一些东西，但它并没有解决问题：进一步解释一下：绝对将元素定位到最后注册的相对父元素。如果未定义相对父对象，则使用所有对象的母对象（BODY）作为参考。[[按照它应该如何工作的定义]@Sam
position:absolute
的包含块是最近的定位（无论是绝对的还是相对的）祖先。在上面的testcase中，这应该是表，但是Gecko处理这种情况是错误的。看见
#topTable {
    position: absolute;
    top: 50px;
}

#outer {
    background-color: Red;
}

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

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

.classParent{
    position: relative;
}