Question

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

问题似乎源于我对定位的使用。 #content元素的位置为position:relative; top:0px; left:0px，因此当#menu元素（嵌套在其中）位于position:absolute; left:0px时，它将被向上推到#content的左侧{1}}元素，正如在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>

非常感谢任何帮助：）

Answer 1

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

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

SO question/answer about position:relative

与IE9和Opera，Firefox和Opera之间的CSS定位不同

1 个答案: