在Internet Explorer中加载屏幕外的菜单

Question

我正在为我的姐姐编写一个网站，我遇到了跨浏览器兼容性问题。也就是说，我使用的菜单是在Internet Explorer中加载一半屏幕外，而在Chrome中看起来很好。我已经尝试了对齐方式，并且我打了一堵墙，不知道如何使它在同一个位置加载，而不管你使用的是什么浏览器。当你看到这个网站时，你会明白我的意思：www.claireharbage.com。画廊上方的菜单应与画廊的左侧对齐。在此先感谢您的帮助，非常感谢。

下面是代码，包括菜单部分：

<table width="900" height="704" bgcolor="#222222"> 
<tr> 
<td width="76" height="39" valign="baseline">&nbsp;</td> 
<td width="629" valign="baseline"></td> 
<p class="heading"><a href="http://www.claireharbage.com">CLAIRE HARBAGE</a></p> 
<td width="50" valign="baseline"> 
<div id="menu"> 
<ul class="menu"> 
    <li><a href="#" class="parent"><span>Work</span></a> 
     <div><ul> 
      <li><a href="/Something.html"><span>Something to Hold On To</span></a></li> 
      <li><a href="/graf_town.html"><span>Graf-Town</span></a></li> 
      <li><a href="/Leaving.html"><span>Leaving Neverland</span></a></li> 
      <li><a href="/punk.html"><span>Pittsburgh Punk</span></a></li> 
      <li><a href="/5.html"><span>A Place to Stay</span></a></li> 
     </ul></div> 
    </li> 
    <li><a href=""><span>About</span></a> 
    </li> 
    <li><a href="#"><span>Wedding</span></a></li> 
    <li class="last"><a href="http://claireharbage.blogspot.com/"><span>Blog</span></a></li> 
</ul> 

这里是影响菜单的位置的CSS代码：

#menu { 
    position:relative; 
    z-index:100; 
    height:16px; 
} 

div#menu { 
    top:40px; 
    left:-630px; 
    width:450px; 
} 

#menu .menu { 
    position:relative; 
    top: -1px; 
} 

#menu * { 
    list-style:none; 
    border:0; 
    padding:0; 
    margin:0; 
} 

#menu a { 
    display:block; 
    padding:8px 14px 8px 14px; 
    white-space:nowrap; 
} 

#menu li { 
    float:left; 
    background:#fff; 
} 

Answer 1

开始，我个人并不推荐使用表格来控制网站布局。相反，我更喜欢CSS。您还在桌上使用了很多内联样式，这使得难以调试。

由于某些原因，我无法精确定位麻烦的CSS，但它看起来像表中的内容是居中对齐的。然后，您使用负的左侧css属性将菜单内容拉回到表格的边缘。

我实际上没有在您的网站布局中看到表格是必要的。这是非常基本的。所以像这样：

<div id="header" /> 
<div id="menu" /> 
<div id="slideshow /> 
<div id="footer" /> 

应该让你的内容布局，你想要没有所有的麻烦表。

Answer 2

我很惊讶你的菜单甚至可以在任何浏览器中显示，当你将它向左推-630像素。如果你想要定位你的菜单div，只需使用边距作为顶部/左侧定位，如果相对于容器没有正确设置，就会将相对于页面主体的东西推向前。

因此，改变这种：

div#menu { 
    top:40px; 
    left:-630px; 
    width:450px; 
} 

为了这样的事情：

div#menu { 
    margin:40px 0 0 20px; //position as you see fit 
    width:450px; 
}