IE9和Opera、Firefox和Opera之间CSS定位的差异_Css_Firefox_Position_Internet Explorer 9_Absolute

IE9和Opera、Firefox和Opera之间CSS定位的差异

css firefox

IE9和Opera、Firefox和Opera之间CSS定位的差异,css,firefox,position,internet-explorer-9,absolute,Css,Firefox,Position,Internet Explorer 9,Absolute,我有一个网站的问题，我正在做一些维护，最新的测试版本可以在这里找到，如果在IE7-9或Opera中查看此页面按预期显示，但在Firefox和Safari中，菜单的位置，使它对屏幕的左侧，它是最好的看到，而不是描述这个问题似乎源于我对定位的使用。内容元素定位位置：相对；顶部：0px；左：0px，这样当嵌套在内部的菜单元素位于位置时：绝对位置；left:0px它将被向右推到内容元素的左侧，这在IE9和Opera中是正确的。然而，Firefox和Safari似乎忽略了内容相对定位的事实，只是将菜单推

我有一个网站的问题，我正在做一些维护，最新的测试版本可以在这里找到，如果在IE7-9或Opera中查看此页面按预期显示，但在Firefox和Safari中，菜单的位置，使它对屏幕的左侧，它是最好的看到，而不是描述

这个问题似乎源于我对定位的使用。内容元素定位位置：相对；顶部：0px；左：0px，这样当嵌套在内部的菜单元素位于位置时：绝对位置；left:0px它将被向右推到内容元素的左侧，这在IE9和Opera中是正确的。然而，Firefox和Safari似乎忽略了内容相对定位的事实，只是将菜单推到屏幕左侧

我试图在下面的简单页面中重现这个问题，但一切都按预期进行

<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>

非常感谢您的帮助：

Firefox通常会忽略表元素上的position:relative，但这可以通过在内容中添加display:block来解决：

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