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，但看起来表格中的内容是居中对齐的。然后，您可以使用负的 left css 属性将菜单内容拉回到表格的边缘。

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

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

应该为您提供您想要的内容布局，而无需表格的所有麻烦。

Answer 2

我很惊讶当你将菜单向左推 -630px 时，你的菜单竟然在任何浏览器中都显示出来。如果您想要定位菜单 div，只需使用边距作为顶部/左侧定位，如果没有相对于容器正确设置，则会将内容相对于页面主体推送。

因此，将其更改

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

为：

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