IE9和Opera之间以及Firefox和Opera之间CSS位置的差异

Question

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

问题似乎源于我使用定位。 #content元素的position:relative; top:0px; left:0px position:relative; top:0px; left:0px position:relative; top:0px; left:0px以便在#menu元素（嵌套在其中）定位时， position:absolute; left:0px 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>

任何帮助将不胜感激：）

Answer 1

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

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

所以关于位置的问题/答案：相对

IE9和Opera之间以及Firefox和Opera之间CSS位置的差异

问题描述

1 个解决方案

解决方案1
0 已采纳 2011-09-27 11:04:25

IE9和Opera之间以及Firefox和Opera之间CSS位置的差异

问题描述

1 个解决方案

解决方案1 0 已采纳 2011-09-27 11:04:25

解决方案1
0 已采纳 2011-09-27 11:04:25