IE9 和 Opera、Firefox 和 Opera 之间 CSS 定位的差异
我正在维护的网站有问题，可以在此处找到最新的测试版本 http: //www.smithandgeorg.com.au/new/ 如果在 IE7-9 或 Opera 中查看，此页面将按预期显示，但在 Firefox 和 Safari 中，菜单的位置位于屏幕的左侧（最好是看到而不是描述）。
问题似乎源于我对定位的使用。 #content 元素定位于 position:relative;顶部：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>
任何帮助将不胜感激:)
I have a problem with a site I am doing some maintanence on, the latest test version can be found here http://www.smithandgeorg.com.au/new/ If viewed in IE7-9 or Opera this page displays as intended, however in Firefox and Safari the menu is positioned so that it is against the left side of the screen (it's best seen rather than described).
The problem seems to stem from my use of positioning. The #content element is positioned position:relative; top:0px; left:0px so that when the #menu element (which is nested inside) is positioned position:absolute; left:0px it will be pushed right up against the left side of the #content element, as happens correctly in IE9 and Opera. However Firefox and Safari seem to ignore the fact that #content is positioned relatively and just push #menu up to the left side of the screen.
I tried to reproduce the problem in the simple page below, but everything worked as expected.
<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>
Any help would be greatly appreciated :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Firefox 通常会忽略表格元素上的
position:relative，但这可以通过将display:block添加到#content来解决：关于位置的问题/答案：相对
Firefox usually ignores
position:relativeon table elements, but this can be fixed by addingdisplay:blockto#content:SO question/answer about position:relative