IE9 与 Opera 以及 Firefox 与 Opera 的 CSS 定位差异答案

【问题标题】：Differences with CSS positioning between IE9 and Opera, and Firefox and OperaIE9 与 Opera 以及 Firefox 与 Opera 的 CSS 定位差异
【发布时间】：2011-09-27 19:04:25
【问题描述】：

我正在维护的网站有问题，可以在此处找到最新的测试版本http://www.smithandgeorg.com.au/new/ 如果在 IE7-9 或 Opera 中查看，此页面将按预期显示，但在 Firefox 和 Safari 中，菜单为放置在屏幕左侧（最好看而不是描述）。

问题似乎源于我对定位的使用。 #content 元素被定位为position:relative; top:0px; left:0px，这样当#menu 元素（嵌套在内部）被定位position:absolute; left:0px 时，它将被推到#content 元素的左侧，就像在IE9 和 Opera。然而 Firefox 和 Safari 似乎忽略了 #content 相对定位的事实，只是将 #menu 推到屏幕左侧。

我尝试在下面的简单页面中重现该问题，但一切正常。

<html>
    <body>
        <div style="border:1px solid red; width:100px; height:100px; position:relative; left:0px">
            <div style="border:1px solid black; width:100px; height:100px; position:absolute; top:60px; left:20px">
            </div>
        </div>
    </body>
</html>

任何帮助将不胜感激:)

【问题讨论】：

标签： css firefox position internet-explorer-9 absolute

【解决方案1】：

Firefox 通常会忽略表格元素上的position:relative，但这可以通过将display:block 添加到#content 来解决：

#content {
position:relative;
top:0;
left:0;
display:block;
}

SO question/answer about position:relative

【讨论】：