html - 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 中，“外部”元素出现在页面下方 50 像素处，但“内部”元素位于页面的最顶部。在 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测试过