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

Answer 1

position:relative;为#outer 添加

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

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